WPF Discussion Boards

23-Apr-09 7:52

I have the following collection:

public class WorkTrayItem
{
    public TabItem WindowAccountTab { get; set; }
    public string WindowSource { get; set; }
    public Window WindowObject { get; set; }
    public Image WindowIcon { get; set; }
    public int WindowType { get; set; }
    public string WindowName { get; set; }

    public WorkTrayItem(TabItem tab, Window window, string source, int windowType, Image icon)
    {
        WindowObject = window;
        WindowSource = source;
        WindowAccountTab = tab;
        WindowType = windowType;
        WindowIcon = icon;
        switch (windowType)
        {
            case 0 : WindowName = "Service Order"; break;
            case 1 : WindowName = "Trouble Ticket"; break;
        }
    }
}

public class WorkTrayItems : ObservableCollection<worktrayitem>
{
    public WorkTrayItems()
    {
        this.Clear();
    }
}

I'm trying to bind it to a list view:

    <UserControl.Resources>

        <controls:WorkTrayItems x:Key="WorkTrayData" />

        <Style TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListBox}}">
            <Setter Property="ItemsSource" Value="{Binding Source={StaticResource WorkTrayData}}">
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border Name="bd" BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="{TemplateBinding Background}" 
                                Margin="{TemplateBinding Margin}">
                            <ScrollViewer Margin="{TemplateBinding Padding}">
                                <WrapPanel ItemWidth="150" IsItemsHost="True" Name="wrapPanel1" MinWidth="100" 
                                           Width="{Binding ActualWidth, 
                                                           RelativeSource={RelativeSource Mode=FindAncestor,
                                                                                          AncestorType=ScrollContentPresenter}}">
                                </WrapPanel>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType='{x:Type ListViewItem}' BasedOn='{StaticResource {x:Type ListBoxItem}}'>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical">
                            <StackPanel.DataContext>
                                <Binding Source="{StaticResource WorkTrayData}" />
                            </StackPanel.DataContext>
                            <Image Margin="3" Source="{Binding WindowImage}"/>
                            <Label Height="21" HorizontalContentAlignment="Center" 
                                      VerticalContentAlignment="Top" 
                                      Content="{Binding WindowTitle}"/>
                            <Label Height="21" HorizontalContentAlignment="Center" 
                                      VerticalContentAlignment="Top" 
                                      Content="{Binding WindowSource}"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type controls:ImageView},ResourceId=ImageView}">
        </Style>

        <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type controls:ImageView},ResourceId=ImageViewItem}">
        </Style>
    </UserControl.Resources>

<Grid>
                        <ListView Name="listViewWorkTray"  
                                   Margin="8,0,7,-116" BorderThickness="0" Background="Transparent" 
                                   SelectionMode="Single" FontFamily="Arial" Height="109" 
                                   VerticalAlignment="Bottom">
                            <ListView.View>
                                <controls:ImageView />
                            </ListView.View>
                        </ListView>
</Grid>

When a user opens a window, I add a WorkTrayItem object to the collection, but it doesn't show up in the ListView. What am I missing? Somehow, I feel like I need to tell the XAML what the variable name is of the list in the parent control (m_workTrayData), but how/where should I do that?

"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass..." - Dale Earnhardt, 1997
-----
"...the staggering layers of obscenity in your statement make it a work of art on so many levels." - Jason Jystad, 10/26/2001

modified on Friday, April 24, 2009 8:05 AM

#realJSOP23-Apr-09 8:35

23-Apr-09 8:35

So who voted my message a 1, and why? Was it too close to actual programming?

Christian Graus23-Apr-09 10:10

Christian Graus

23-Apr-09 10:10

If you're setting the binding context of the window, or the control, then you don't need to tell anything the variable name, it's already there in the binding context. I am surprised that you can create an observable collection with so little code, all the examples I have seen, use more. Does the base class provide the rest ? I assume it's not strongly typed then, strong typing is, I am pretty sure, what the extra code I've seen adds to the equation.

Christian Graus

Driven to the arms of OSX by Vista.

"I am new to programming world. I have been learning c# for about past four weeks. I am quite acquainted with the fundamentals of c#. Now I have to work on a project which converts given flat files to XML using the XML serialization method" - SK64 ( but the forums have stuff like this posted every day )

#realJSOP23-Apr-09 10:21

23-Apr-09 10:21

Christian Graus wrote:
I am surprised that you can create an observable collection with so little code, all the examples I have seen, use more.

I'm a minimalist by nature. Remember - I started programming when having 4K of RAM was considered "downtown".

Christian Graus wrote:
If you're setting the binding context of the window, or the control, then you don't need to tell anything the variable name, it's already there in the binding context.

But how can it know if I don't tell it what data member to use?

Christian Graus23-Apr-09 10:50

Christian Graus

23-Apr-09 10:50

OK, then I guess this is the issue. You have to set the DataContext of the control or the page ( depending on the XAML, I believe ) to be that list. I am not sure, but I think if you set the data context of the page ( which can be done in the XAML ) then the control will 'inherit' it.

I've just checked my code, and I tend to do it in the code, not the XAML.

playlists.DataContext = Playlists.GetFilesNotIn(list);

sets the data context of a control to a list of objects. I use an observable collection elsewhere, but the code is the same.

Mark Salsbery23-Apr-09 11:21

23-Apr-09 11:21

Christian Graus wrote:
strong typing is, I am pretty sure, what the extra code I've seen adds to the equation

What advantage does that have over ObservableCollection<T> ?

This seems pretty simple to me:

public class MyItemCollection : ObservableCollection<Item>
{
}

Mark

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

#realJSOP23-Apr-09 13:50

23-Apr-09 13:50

Christian Graus wrote:
I am surprised that you can create an observable collection with so little code, all the examples I have seen, use more.

I now realize what you're talking about. The auto-encode stuff ignored the type specifier after the word ObservableCollection.

I fixed it.

#realJSOP24-Apr-09 2:56

24-Apr-09 2:56

Well, I moved the DataContext assignment into the code instead of the XAML, and I also noticed that ALL of my field names were incorrect, but even after fixing them, I get nothing in my listview (even though the collection contains items, and I've verified this through the debugger).

I haven't got a clue as to why the items aren't showing up.

Mark Salsbery24-Apr-09 6:45

24-Apr-09 6:45

John Simmons / outlaw programmer wrote:
I moved the DataContext assignment into the code

Which element's DataContext are you assigning to?

I also can't see where you are binding your ListView's ItemsSource
(maybe I missed it)...

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

#realJSOP24-Apr-09 10:25

Re: Data Binding Problem [modified]

24-Apr-09 10:25

I'm assigning the collection to the listview's datacontext like so:

m_workTrayData = new UDPWorkTrayItems();
this.listViewWorkTray.DataContext = m_workTrayData;

The ItemsSource is being set like so:

<Setter Property="ItemsSource" Value="{Binding Source={StaticResource WorkTrayData}}" ></Setter>

Mark Salsbery24-Apr-09 10:52

24-Apr-09 10:52

Two different source collections?

If you want to keep the

m_workTrayData = new UDPWorkTrayItems();
this.listViewWorkTray.DataContext = m_workTrayData;

then the ItemsSource binding should be

<Setter Property="ItemsSource" Value="{Binding}" />

and m_workTrayData will be the collection bound to the ListView.

If you want to use the collection object defined in XAML ("WorkTrayData")
then your binding sould be fine, but WorkTrayData is the collection you want to
add objects to.

Here's a quick and dirty way to check if your ItemsSource is bound correctly
(note I used WindowTitle and WindowSource - adjust for actual property names) :

m_workTrayData = new UDPWorkTrayItems();
this.listViewWorkTray.DataContext = m_workTrayData;

    <Window.Resources>
        <Style TargetType="{x:Type ListView}" >
            <Setter Property="ItemsSource" Value="{Binding}" />
        </Style>
    </Window.Resources>
...
    <Grid>
        <ListView Name="listViewWorkTray">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="WindowTitle" Width="100" DisplayMemberBinding="{Binding Path=WindowTitle}"></GridViewColumn>
                    <GridViewColumn Header="WindowSource" Width="100" DisplayMemberBinding="{Binding Path=WindowSource}"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>

That should show you if your collection is bound correctly.

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

modified on Friday, April 24, 2009 4:59 PM

#realJSOP25-Apr-09 2:52

25-Apr-09 2:52

Mark Salsbery wrote:
If you want to keep the

m_workTrayData = new UDPWorkTrayItems();
this.listViewWorkTray.DataContext = m_workTrayData;

then the ItemsSource binding should be

<setter property="ItemsSource" value="{Binding}">

That was the answer. Smile | :)

It's now displaying the text part. The image isn't showing. Should I be using a Converter even if the Image in the WorkTrayItem is an actual Image object that I'm retrieving from the window object? I'm off to search google, and I'll be checking back frequently to see if you've responded (or to post my success/failures).

Many thanks for your help on this.

Mark Salsbery25-Apr-09 6:58

Making a template for a ListView in WPF ?

25-Apr-09 6:58

You don't need a converter if the property binded to is the right type.

In WPF, "Image" is a UIElement, not the actual image data.
For binding to Image.Source, the bound-to type should be System.Windows.Media.ImageSource
(or derived).

Here's an example, using an imagesource for a JPEG image added to the project
as a resource:

public class WorkTrayItem
{
    public ImageSource WindowImage { get; set; }

    public WorkTrayItem(...)
    {
        WindowImage = new BitmapImage(new Uri(@"pack://application:,,,/Images/someimageresource.jpg", UriKind.RelativeOrAbsolute));
    }
}

Now, in your template, if you bind your Image.Source to WindowImage

<Image Margin="3" Source="{Binding WindowImage}"/>

you should see your image.

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

Mohammad Dayyan23-Apr-09 4:55

23-Apr-09 4:55

Hi.
I'm going to create a ListView template. But when I've done it , I can't add items into the ListView !!!
I think , I don't do in correct way.

Could you guide me , how we can create a template for a ListView ?
Thanks.

Mark Salsbery23-Apr-09 7:04

23-Apr-09 7:04

Can you post a simple example of your ListView and template code?

And how are you trying to add items?

Mark

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

Mohammad Dayyan23-Apr-09 7:21

23-Apr-09 7:21

Mark Salsbery wrote:
Can you post a simple example of your ListView and template code?

Sure. this is the XAML of my template :

<ControlTemplate x:Key=<span style="color:#A31515;">"ListViewTemplate"</span> TargetType=<span style="color:#A31515;">"{x:Type ListView}"</span>>
    <StackPanel Orientation=<span style="color:#A31515;">"Horizontal"</span>>
        <StackPanel>
            <GridViewColumnHeader Content=<span style="color:#A31515;">"Icon"</span> x:Name=<span style="color:#A31515;">"Icon"</span> MinWidth=<span style="color:#A31515;">"34"</span>/>
            <ListViewItem Content=<span style="color:#A31515;">"item"</span>/>
        </StackPanel>
        <StackPanel>
            <GridViewColumnHeader Content=<span style="color:#A31515;">"Title"</span> x:Name=<span style="color:#A31515;">"Title"</span> MinWidth=<span style="color:#A31515;">"85"</span>/>
            <ListViewItem Content=<span style="color:#A31515;">"item"</span>/>
        </StackPanel>
        <StackPanel>
            <GridViewColumnHeader Content=<span style="color:#A31515;">"Username"</span> x:Name=<span style="color:#A31515;">"Username"</span> MinWidth=<span style="color:#A31515;">"80"</span>/>
            <ListViewItem Content=<span style="color:#A31515;">"item"</span>/>
        </StackPanel>
        <StackPanel>
            <GridViewColumnHeader Content=<span style="color:#A31515;">"Password"</span> x:Name=<span style="color:#A31515;">"Password"</span> MinWidth=<span style="color:#A31515;">"80"</span>/>
            <ListViewItem Content=<span style="color:#A31515;">"item"</span>/>
        </StackPanel>
        <StackPanel>
            <GridViewColumnHeader Content=<span style="color:#A31515;">"URL"</span> x:Name=<span style="color:#A31515;">"url"</span> MinWidth=<span style="color:#A31515;">"160"</span>/>
            <ListViewItem Content=<span style="color:#A31515;">"item"</span>/>
        </StackPanel>
    </StackPanel>
</ControlTemplate>

Mark Salsbery wrote:
And how are you trying to add items?

listview.Items.Add("an item");

Mark Salsbery23-Apr-09 7:55

23-Apr-09 7:55

Your template doesn't have a place to display the added items.

Maybe try something like this:

<ListView Name="listview" >
    <ListView.View>
        <GridView AllowsColumnReorder="False" >
            <GridViewColumn Header="Icon" Width="34" ></GridViewColumn> <!--DisplayMemberBinding="{Binding Path=...}"-->
            <GridViewColumn Header="Title" Width="85" ></GridViewColumn>
            <GridViewColumn Header="Username" Width="80" ></GridViewColumn>
            <GridViewColumn Header="Password" Width="80" ></GridViewColumn>
            <GridViewColumn Header="URL" Width="160" ></GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

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

Mohammad Dayyan23-Apr-09 8:13

23-Apr-09 8:13

Thanks Mark, but we can't use ListView tag within ControlTemplate tag !!!
Isn't it ?

Mark Salsbery23-Apr-09 8:29

23-Apr-09 8:29

Sure - you can re template the control, but you need to provide
the items presenter to show the items.

Here's a default template for a ListView you can use as a starting place:

<SolidColorBrush x:Key="ListBorder" Color="#828790"/>
<Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
    <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListView}">
                <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1">
                    <ScrollViewer Padding="{TemplateBinding Padding}" Focusable="false">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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

Mohammad Dayyan23-Apr-09 8:45