Re: Silverlight development without Expression Blend - WPF Discussion Boards

Re: Silverlight development without Expression Blend

13-Nov-08 1:00

I've just looked at "Get Started Building Silverlight 2 Applications" on the Silverlight site. Step 2 of the 4 is Install Expression Blend. How viable is it to learn Silverlight dev without having Expression Blend. Say I only have Visual Web Developer Express SP1? (I've not actually downloaded SP1 yet, btw.)

Kevin

DaveX8613-Nov-08 4:35

Re: Silverlight development without Expression Blend

13-Nov-08 4:35

- I'm doing it with VS 2008 only, myself...I think you have to install SP1 if you want to use Silverlight 2.0 final.

- I downloaded and installed the Blend trial, but it conflicted with my Office 2003 so I un-installed it.

- If you know Flash and are used to designing graphically, it's a little irritating not being able to click on the graphics you create in the XAML code. If you're more programmer oriented anyway, that wouldn't be a big deal.

- Some of the 'how-to' videos only show how to do it with Blend...if you were patient, you could probably get around it.

- Need Blend for keyframe-based animation if you want to do it like Flash.

So far, it's going well, so yeah, you can get by without Blend for most stuff, except keyframe-based animation

Kevin McFarlane13-Nov-08 5:38

Re: Silverlight development without Expression Blend

13-Nov-08 5:38

Thanks David, that's good to know. I'll have to install SP1 for Express. Can't afford a VS 2008 upgrade right now ("resting" contractor Frown | :(

Kevin

DaveX8613-Nov-08 6:28

Re: Silverlight development without Expression Blend

13-Nov-08 6:28

Kevin McFarlane wrote:
Can't afford a VS 2008 upgrade right now ("resting" contractor ).

I hear you...freelancing/resting/learning here as well.

Kevin McFarlane26-Nov-08 2:49

Re: Silverlight development without Expression Blend

26-Nov-08 2:49

Well, I finally upgraded to SP1 at the weekend and I've been working through Scott Guthrie's tutorial. It can be a bit fiddly when you make typos and are faced with a blank screen! Do you have a Silverlight book yet? It seems that Silverlight 2 in Action is worth getting but I'll see how far I get with online resources for now.

Kevin

DaveX8626-Nov-08 3:43

Re: Silverlight development without Expression Blend

26-Nov-08 3:43

Fiddly is right Smile | :)

Try watching some of the videos...you're trying to follow along and he's whipping through the thing...pause...play....pause...play...pause...'what was that method again?'...rewind...rewind...play...rewind...play...'oh, ya, that's it'...play...pause...play...pause. It's good negative reinforcement to make you memorize stuff, anyway Smile | :)

I haven't gotten a book yet...mostly sorting through the online stuff as well.

So far, I'm liking Silverlight...my only complaint is about dealing with database stuff...a technology that's supposed to be all 'open' and 'cross platform' is too Microsoft Server centric...I need a database backend for it that works on a linux.

Paul Conrad13-Nov-08 12:14

Paul Conrad

13-Nov-08 12:14

Just started taking a serious look at Silverlight 2 myself, had to uninstall Blend since the evaluation expired and I don't miss it. Working with it off VS2008 Standard edition right now and all is okay.

"The clue train passed his station without stopping." - John Simmons / outlaw programmer

"Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

"Not only do you continue to babble nonsense, you can't even correctly remember the nonsense you babbled just minutes ago." - Rob Graham

Re: Silverlight development without Expression Blend

Kevin McFarlane13-Nov-08 23:01

Bind ObservableCollection to a Grid

13-Nov-08 23:01

OK, I'll have to give it a go. Got to install SP1 for Express first though. I'm hoping that it doesn't trash my system, as it can be problematic judging from reports.

Kevin

ezazazel12-Nov-08 11:02

12-Nov-08 11:02

Best is, when I show an example:

XAML:

<Window x:Class="WpfApplication2.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid x:Name="grid" ShowGridLines="True">
        
    </Grid>
</Window>

C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Threading;

namespace WpfApplication2
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            ObsCls coll = CreateObsColl();
            grid.DataContext = coll; //THIS IS WHAT I WANT, BUT IT DOES NOT WORK LIKE THIS
            

            for (int i = 0; i < 5; i++)
            {
                RowDefinition row = new RowDefinition();
                ColumnDefinition col = new ColumnDefinition();
                grid.RowDefinitions.Add(row);
                grid.ColumnDefinitions.Add(col);
            }

            foreach (var item in coll)
            {
                Grid.SetColumn(item, (int)item.Content);
                Grid.SetRow(item, (int)item.Content);
            }

            Thread t = new Thread(() =>
                {
                    Dispatcher.BeginInvoke(new Action(() =>
                        {
                            coll.Clear();
                            Button b = new Button() { Content = 4 };
                            Grid.SetRow(b, (int)b.Content);
                            Grid.SetColumn(b, (int)b.Content);
                            coll.Add(b);
                        }));
                });
            t.Start();
        }

        private ObsCls CreateObsColl()
        {
            ObsCls coll = new ObsCls();
            coll.Add(new Button() { Content = 1 });
            coll.Add(new Button() { Content = 2 });
            coll.Add(new Button() { Content = 3 });

            return coll;
        }
    }
}

using System.Collections.ObjectModel;
using System.Windows.Controls;

namespace WpfApplication2
{
    class ObsCls : ObservableCollection<Button>
    {
    }
}

What has to be done to get this working? Help would be really apreciated.
Thanks in advance

Mark Salsbery12-Nov-08 12:22

12-Nov-08 12:22

Scratch that last reply - you were already adding child buttons.

It looks like you're trying to use a Grid (Panel) as a DataGrid...
Are you using the right grid type? Smile | :)

Mark

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

ezazazel12-Nov-08 20:02

12-Nov-08 20:02

what would be the alternative? As long as there is no DataGrid in WPF.
After all all I want to do is displaying Buttons and Textblocks on certain Positions within a Matrix.

What I do now is cleaning the children of the grid and resetting them each time I change something. Not the best way I think, despite other problems I have with this..

Mark Salsbery12-Nov-08 20:37

12-Nov-08 20:37

ezazazel wrote:
what would be the alternative? As long as there is no DataGrid in WPF.

There's a nice datagrid here: WPF Toolkit - October 2008 Release[^]
It's not in the .NET framework proper yet, but it's there as an add-on!

Is datagrid functionality what you are looking for or do you have controls
that dynamically change often and/or are always arranged at runtime?
I'm not sure what you're trying to do Smile | :)

Mark

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

ezazazel13-Nov-08 2:13

13-Nov-08 2:13

Ok, let's dive in deep:
I have a device where I can connect devices with other devices, a matrix.
The devices on each side send events, e.g OK and FAIL

I want to write a piece of software which has an observable collection with elements (buttons)
created by the information from the events.
This is: two devices connected (IN / OUT)
The Position inside the softwarematrix is generated from indeviceposition=>X and outdeviceposition=>Y

So in the beginning I ask all devices and generate the observablecollection.

A timer request when elapsed all devices for their status.

Let's pretend device1(IN) with device2(OUT) is connected.
This results in a button within the softwarematrix in Grid.SetRow(item, 1) and Grid.SerRow(item,2)
Now the timer requests again and this special IN/OUT combination failed, so the value ISFaulty of the observablecollectionitem is set to true and the softwarematrix displays the button now in red.

As you can see, I did it with grid.Children.Clear and grid.Children.Add when the observablecollection fires the event onCollectionChanged.

What I think is, that there should be a better way, maybe by binding the display directly to the observablecollection.
To get this to work, there need to be rules:
Rule1: PositionX and PositionY inside the softwarematrix are taken out of the properties from the class
Rule2: BackgroundColor is defined by the status of an enumeration

So that's it in short words.

Gideon Engelberth13-Nov-08 8:16

Gideon Engelberth

13-Nov-08 8:16

If you have a fixed number of rows and columns in the grid, you may be able to use a generic ItemsControl with some clever styles and templates. The ItemsControl.ItemsPanel would have the grid definition, and the ItemsTemplate would have a DataTemplate that binds the Grid.Row/Column properties to the associated properties on your object. The colorings could be set using Triggers (maybe DataTrigger instead of regular Trigger) in the template based on the value of an enumeration property.

If you have a dynamic number of rows and columns, it could be done, but is much more difficult because you have to get the actual items panel for your ItemsControl instance. I am fairly certain that this is doable, but it takes a fair bit of code to pull off.

ezazazel13-Nov-08 9:55

13-Nov-08 9:55

Actually I'm doing this:

internal class ObsCollection<T> :ObservableCollection<T>
{
    private bool _suppressNotification = false;

    protected override void InsertItem(int index, T item)
    {
        base.InsertItem(index, item);
        if (item is INotifyPropertyChanged)
            (item as INotifyPropertyChanged).PropertyChanged += new PropertyChangedEventHandler(ObsCollection_PropertyChanged);
    }

    protected override void RemoveItem(int index)
    {
        if (this[index] is INotifyPropertyChanged)
            (this[index] as INotifyPropertyChanged).PropertyChanged -= new PropertyChangedEventHandler(ObsCollection_PropertyChanged);

        base.RemoveItem(index);
    }

    protected override void ClearItems()
    {
        //base.ClearItems();
        for (int i = 0; i < this.Count; i++)
        {
            RemoveItem(i);
        }
    }

    void ObsCollection_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        OnCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));
    }

    protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
    {
        if (!_suppressNotification)
            base.OnCollectionChanged(e);
    }

    public void AddRange(IEnumerable<T> list)
    {
        if (list == null)
            throw new ArgumentNullException("list");

        _suppressNotification = true;

        foreach (T item in list)
        {
            Add(item);
        }
        _suppressNotification = false;
        OnCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));

    }
}

and in the gridControl

void s_MElementCollection_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
        {
            command.SetElementsOnGrid(ref this.grid);
        }

internal void SetElementsOnGrid(ref Grid grid)
        {
            grid.Children.Clear();

            SetHeaders(ref grid);

            foreach (var item in s_Constructor.s_MElementCollection)
            {
                Grid.SetColumn(item, item.PositionDevice);
                Grid.SetRow(item, item.PositionAntenna);

                item.CommandParameter = item;
                item.Command = UICommands.uiCommand;

                if (item.IsEnabled)
                    if (item.IsError) item.Background = Brushes.OrangeRed; else item.Background = Brushes.Green;
                else item.Background = Brushes.DarkRed;



                grid.Children.Add(item);
            }
        }

Seems to work by now. What do you think about this aproach?

Re: Bind ObservableCollection to a Grid [modified]

Gideon Engelberth13-Nov-08 12:47

Gideon Engelberth

13-Nov-08 12:47

If you have something that already works, I would stick with it.

Only thing that jumps out at me is that you are passing the Grid by reference. Passing a class parameter by reference is only needed in exceptional circumstances.

Mark Salsbery14-Nov-08 12:40

14-Nov-08 12:40

I personally really don't like the idea of having UI elements in the collection
when WPF provides data templating to build the UI for you so you can keep your
UI and data separate.

Given that, your requirements, and the fact that I've never tried making
a custom ItemsControl before, I thought I'd play around with this.
Always fun to learn new stuff!

Here's what I came up with...

ezazazel wrote:
Rule1: PositionX and PositionY inside the softwarematrix are taken out of the properties from the class
Rule2: BackgroundColor is defined by the status of an enumeration

Given these rules, I started by creating an "Obs" class, based on the name of your
originally posted "ObsCls" class. This class holds a text string, the row and column
where it should be in the grid, and a status enumeration.

So you can change an Obs objects properties and have the change magically appear in the UI,
I used INotifyPropertyChanged (dependency properties would work fine too).

I also added a class called "ObsList", which is an ObservableCollection of Obs objects.

Here's that:

using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Data;
using System.Windows.Controls;
using System.ComponentModel;


namespace MyNamespace
{
    public class Obs : INotifyPropertyChanged
    {
        public enum ObsStatus
        {
            Off,
            On
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private string _name;
        public string Name
        {
            get
            {
                return _name;
            }
            set
            {
                _name = value;
                OnPropertyChanged("Name");
            }
        }

        private int _row;
        public int Row
        {
            get
            {
                return _row;
            }
            set
            {
                _row = value;
                OnPropertyChanged("Row");
            }
        }


        private int _col;
        public int Col
        {
            get
            {
                return _col;
            }
            set
            {
                _col = value;
                OnPropertyChanged("Col");
            }
        }


        private ObsStatus _status;
        public ObsStatus Status
        {
            get
            {
                return _status;
            }
            set
            {
                _status = value;
                OnPropertyChanged("Status");
            }
        }

        public Obs(string str, int row, int col)
        {
            Name = str;
            Row = row;
            Col = col;
            Status = ObsStatus.Off;
        }

        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }
    }

    public class ObsList : ObservableCollection<Obs>
    {
    }
}

I also created a class derived from ObsList to use as static data in the designer:

public class ObsCls_designer : ObsList
{
    public ObsCls_designer()
    {
        Obs newobs = new Obs("1", 0, 0);
        newobs.Status = Obs.ObsStatus.Off;
        Add(newobs);

        newobs = new Obs("2", 1, 1);
        newobs.Status = Obs.ObsStatus.On;
        Add(newobs);

        newobs = new Obs("3", 2, 2);
        newobs.Status = Obs.ObsStatus.Off;
        Add(newobs);

        newobs = new Obs("4", 3, 3);
        newobs.Status = Obs.ObsStatus.On;
        Add(newobs);

        newobs = new Obs("5", 4, 4);
        newobs.Status = Obs.ObsStatus.Off;
        Add(newobs);

    }
}

That's it on the data side.

For the UI, you need an ItemsControl or derived to bind a collection of data to.
Since none of the built-in ItemsControls use a Grid as an ItemsPanel, I needed
to make my own custom ItemsControl. Here's the XAML in its entirety, wrapped in
a Window to test it all:

<Window x:Class="MyNamespace.TestItemsControlGridWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MyNamespace" 
    Title="TestWindow" Height="204" Width="293" ShowInTaskbar="False" WindowStartupLocation="CenterOwner" >
    <Window.Resources>
        <local:ObsCls_designer x:Key="obsCls_designer" />
        <local:ObsItemStyleSelector x:Key="obsItemStyleSelector"/>
    </Window.Resources>
    <StackPanel Width="Auto" Height="Auto">
        <Border Width="Auto" Height="Auto" BorderThickness="1,1,1,1" BorderBrush="#FF505050" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="4,4,4,4">
            <Grid Width="Auto" Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <ItemsControl Loaded="ItemsControl_Loaded" ItemContainerStyleSelector="{StaticResource obsItemStyleSelector}" ItemsSource="{Binding Source={StaticResource obsCls_designer}}" Width="Auto" Height="Auto" >
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Grid ShowGridLines="True">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" MinHeight="25"/>
                                    <RowDefinition Height="Auto" MinHeight="25"/>
                                    <RowDefinition Height="Auto" MinHeight="25"/>
                                    <RowDefinition Height="Auto" MinHeight="25"/>
                                    <RowDefinition Height="Auto" MinHeight="25"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" MinWidth="50"/>
                                    <ColumnDefinition Width="Auto" MinWidth="50"/>
                                    <ColumnDefinition Width="Auto" MinWidth="50"/>
                                    <ColumnDefinition Width="Auto" MinWidth="50"/>
                                    <ColumnDefinition Width="Auto" MinWidth="50"/>
                                </Grid.ColumnDefinitions>
                            </Grid>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate DataType="{x:Type local:Obs}">
                            <Button Click="Button_Click">
                                <Button.Style>
                                    <Style TargetType="{x:Type Button}" >
                                        <Setter Property="Content" Value="{Binding Path=Name}"/>
                                        <Setter Property="Width" Value="50"/>
                                        <Setter Property="Height" Value="Auto"/>
                                        <Setter Property="Margin" Value="2"/>
                                        <Setter Property="Background" Value="#80BBBB00"/>
                                        <Setter Property="Foreground" Value="#FF000000"/>
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Path=Status}" Value="On">
                                                <Setter Property="Background" Value="#80FFFF00"/>
                                                <Setter Property="Foreground" Value="#FFFF0000"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Button.Style>
                            </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
        </Border>
        <Button Content="Test" HorizontalAlignment="Center" VerticalAlignment="Center" Click="TestButton_Click"/>
    </StackPanel>
</Window>

For simplicity, I inlined all the style and template stuff.

The ItemsControl.ItemTemplate is the key. It determines how items will
appear in the ItemsControl. I used a DataTemplate bound to the Obs type
which contains just a Button.

Here's the code for the ObsItemStyleSelector (thanks Gideon!) used to
bind the Obs.Row/Obs.Col properties to the Grid.Row/Grid.Column attached
properties:

public class ObsItemStyleSelector : StyleSelector
{
    public override Style SelectStyle(object item, DependencyObject container)
    {
        Obs obs = item as Obs;
        ContentPresenter cp = container as ContentPresenter;

        if (null != obs && null != cp)
        {
            Binding binding = new Binding("Row");
            binding.Source = obs;
            cp.SetBinding(Grid.RowProperty, binding);

            binding = new Binding("Col");
            binding.Source = obs;
            cp.SetBinding(Grid.ColumnProperty, binding);
        }

        return null;
    }
}

To tie it all together and try it out, here's the code-behind for the test window:

public partial class TestItemsControlGridWindow : Window
{
    private ObsList obslist = new ObsList();

    public TestItemsControlGridWindow()
    {
        InitializeComponent();
    }

    private void ItemsControl_Loaded(object sender, RoutedEventArgs e)
    {
        ItemsControl itemscontrol = sender as ItemsControl;

        itemscontrol.ItemsSource = obslist;

        Obs newobs = new Obs("1", 0, 0);
        newobs.Status = Obs.ObsStatus.Off;
        obslist.Add(newobs);

        newobs = new Obs("2", 1, 1);
        newobs.Status = Obs.ObsStatus.On;
        obslist.Add(newobs);

        newobs = new Obs("3", 2, 2);
        newobs.Status = Obs.ObsStatus.Off;
        obslist.Add(newobs);

        newobs = new Obs("4", 3, 3);
        newobs.Status = Obs.ObsStatus.On;
        obslist.Add(newobs);

        newobs = new Obs("5", 4, 4);
        newobs.Status = Obs.ObsStatus.Off;
        obslist.Add(newobs);
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Button button = sender as Button;
        Obs obs = button.DataContext as Obs;
        if (obs.Status == Obs.ObsStatus.Off)
            obs.Status = Obs.ObsStatus.On;
        else
            obs.Status = Obs.ObsStatus.Off;
    }

    private void TestButton_Click(object sender, RoutedEventArgs e)
    {
        // Test moving an object to another cell
        obslist[2].Col = 0;

        // Test adding a new object at runtime
        Obs newobs = new Obs("6", 0, 3);
        newobs.Status = Obs.ObsStatus.Off;
        obslist.Add(newobs);
    }
}

ItemsControl_Loaded() sets the ItemControl's ItemsSource to a fresh empty ObsList
Instead of using the designer data.
Button_Click() toggles the Obs object State On or Off to test the associated UI tigger.
TestButton_Click() tests moving an item and adding an item, both by just chaging the
objects properties!

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

modified on Saturday, November 15, 2008 1:02 PM

ezazazel15-Nov-08 1:54

15-Nov-08 1:54

Thanks Mark, you're great. Didn't expect anyone to do my work - nethertheless you saved my day!
Thank you again, am going to implement this next week!
So long,
eza

PS: Tried to vote for your reply, but it's too far on the right side, and I can't scroll there.
Seems to be a problem of the forum software. Anyway, it's a clear 5 from me!

Mark Salsbery15-Nov-08 6:46

15-Nov-08 6:46

No problem! It's a fun exercise. I'm still learning how to
do more complex WPF stuff and this one was a new challenge.

Hopefully you can get something useful out of it. Keeping the
data separate from the UI elements is much nicer and in the spirit
of WPF IMO.

I started another thread here about the Grid.Row/Grid.Column binding.
Learned something new there too Smile | :)

Cheers,
Mark

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

Mark Salsbery15-Nov-08 7:15

ComboBox's SelectedValue set to null when changing templates

15-Nov-08 7:15

FYI

I updated the code I posted above to incorporate the binding code
discussed in the other thread.

The Obs class and the XAML changed.

Cheers,
Mark

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

James J. Foster12-Nov-08 4:56

James J. Foster

12-Nov-08 4:56

I am using the MVVM pattern, and have a multi-screen data entry form. There is a single VM with an ActiveScreen property that uses INotifyPropertyChanged events. Templates are used by the View based on the current ActiveScreen.

On one of the screens, I have a ComboBox that is bound to a List<> for its ItemsSource. I am using the MVVM pattern, and the selected value of the Combobox is twoway bound to a property on my model. All works fine when you are on the screen entering data.

When the user changes the ActiveScreen, and hence a new template is used in the View, a weird thing happens. The property on the model bound to the combobox is set to NULL. Looking at the call stack, I see the ActiveScreen property change event, then a bunch of WPF code, and then my property setter. The count in the collection on the combobox at that point is 0.

It seems as if WPF does some cleanup of the combobox by removing all the items, which sets the selecteditem to null, and because of my binding, it changes my model. The net effect is I lose the data entered by the user. The other elements on that screen (textboxes, datepickers, etc) do not have this problem, so it's clearly something with the ComboBox.

Has anyone hit this before, and know of a solution? The problem is, I want the user to be able to select a blank value, so I don't know if it's the user setting the value to null or this odd series of events.

Adobe Illustrator exporter to XAML

DaveX8611-Nov-08 16:50