Data Binding Problem [modified] - WPF Discussion Boards

Re: e.currentTarget in WPF?

24-Apr-09 6:01

That is the list of fixes.

As it's always been with Windows programming - if there isn't a
system-provided control that suits your needs, you write your own.

At least WPF makes it easier than ever.

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

e.currentTarget in WPF?

emptythetill23-Apr-09 8:52

emptythetill

23-Apr-09 8:52

Hello.

I have several hundred buttons that need the same animation applied on mouse enter, in AS3 I'd do this with a tween and apply that tween using e.currentTarget, probably inside a for loop. Is there a way to do this in WPF, have a storyboard for no specific object be applied to an array of items?

Regards.

E.

Pete O'Hanlon24-Apr-09 2:11

Pete O'Hanlon

24-Apr-09 2:11

This is trivial in WPF. All you need do is declare a storyboard inside a trigger that applys to the button type. Here's a simple example:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <Style TargetType="{x:Type Button}">
      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.20" Duration="0:0:0.5" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.5" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.ExitActions>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Page.Resources>
  <StackPanel>  
    <Button Content="Hello" />
    <Button Content="Hello 2" />
  </StackPanel>
</Page>

"WPF has many lovers. It's a veritable porn star!" - Josh Smith

As Braveheart once said, "You can take our freedom but you'll never take our Hobnobs!" - Martin Hughes.

My blog | My articles | MoXAML PowerToys | Onyx

Re: e.currentTarget in WPF?

emptythetill24-Apr-09 3:48

emptythetill

24-Apr-09 3:48

Hello.

Thank you for that, it makes sense. Can that method be used for DoubleAnimationUsingKeyframes however, as the animations need to be more complex than I'd be happy to try and code so will create them in Blend on a proxy object. When attempting this I get:

[unknown]property does not point to a dependency object in path"(0).(1).[2].(2);"

Re: e.currentTarget in WPF?

Pete O'Hanlon24-Apr-09 4:30

Pete O'Hanlon

24-Apr-09 4:30

Certainly. Here's this sample modified:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <Style TargetType="{x:Type Button}">
      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
                  <LinearDoubleKeyFrame Value="0.6" KeyTime="0:0:0.5" />
                  <DiscreteDoubleKeyFrame Value="0.2" KeyTime="0:0:1" />
                </DoubleAnimationUsingKeyFrames>
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Opacity" To="1"/>
              </Storyboard>
            </BeginStoryboard>
          </Trigger.ExitActions>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Page.Resources>
  <StackPanel>
    <Button Content="Hello"/>
    <Button Content="Hello 2"/>
  </StackPanel>
</Page>

"WPF has many lovers. It's a veritable porn star!" - Josh Smith

As Braveheart once said, "You can take our freedom but you'll never take our Hobnobs!" - Martin Hughes.

My blog | My articles | MoXAML PowerToys | Onyx

Data Binding Problem [modified]

#realJSOP23-Apr-09 7:52

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

Mohammad Dayyan

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

Mohammad Dayyan

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]