Re: Accept Button and Data Binding inconsistency - WPF Discussion Boards

4-Jul-12 23:11

It is convenient to have an "Accept Button" (in WPF: IsDefault="True") on a Form.
In the Windows Forms world, I used to read the data from the UI to the object(s) in the corresponding Click event of the button.
But with WPF, data binding ought to be used. In the constructor of the Window, I set this.DataContext = test;
And here comes the problem: the user entered some text in TextBox2, and hits the Enter key. Now, the command bound to the OK button gets executed, the data are saved.
But it is not the correct data! Why? TextBox2 has not yet lost focus, and consequently the ViewModel has not yet been updated.
[Edit]In Windows Forms, several controls have a Validating event. That event gets fired before the Click event event of the button, though the focus remains on that element.[/Edit]
How do you overcome such a problem?

modified 5-Jul-12 6:01am.

Wayne Gaylard4-Jul-12 23:20

Wayne Gaylard

4-Jul-12 23:20

You should set the TextBox's UpdateSourceTrigger property to PropertyChanged and then it will automatically update the ViewModel whenever any changes are done to the text. Something like this :-

HTML

Text="{Binding Path=yourTextProperty, UpdateSourceTrigger=PropertyChanged}"

By default this property is set to LostFocus, which only updates the property when the user moves focus to another control.

Hope this helps.

When I was a coder, we worked on algorithms. Today, we memorize APIs for countless libraries — those libraries have the algorithms - Eric Allman

Bernhard Hiller4-Jul-12 23:22

4-Jul-12 23:22

Thanks for the idea. But it is not only one text box. The user can hit the Enter key anywhere. And on every form with an accept button. This means that a general solution is required.

Abhinav S4-Jul-12 23:23

Abhinav S

4-Jul-12 23:23

You can use UpdateSourceTrigger=”OnPropertyChanged” as a workaround to help you fix this in some scenarios.
Otherwise, its a WPF bug.

Check this post[^] out as well.

Build your own survey - http://www.factile.net

Bernhard Hiller4-Jul-12 23:36

4-Jul-12 23:36

That link is very interesting. I have checked with a Windows Forms application (also .Net 4, Visual Studio 2010): the Leave event (corresponding to LostFocus) does not happen when the user hits the Enter key. That means, this behavior is consistent between Windows Forms and WPF. Only due to DataBinding, a problem arises.
[Edit]Test with C# 2005 Express, .Net 2: same behavior[/Edit]

modified 5-Jul-12 5:45am.

Pete O'Hanlon5-Jul-12 0:30

5-Jul-12 0:30

A while back, I created an Attached Behavior (I'm well known for my love of them), which I attach to the default button. This behaviour hooks into the click event and calls the following (this is from memory, so I apologise in advance if it's not 100% correct)

private void UpdateFocussed()
{
  FrameworkElement el = Keyboard.FocusedElement as FrameworkElement;
  if (el != null)
  {
    BindingExpression expression = null;
    if (el is TextBox)
    {
      expression = el.GetBindingExpression(TextBox.TextProperty);
      if (expression != null)
      {
        expression.UpdateSource();
      }
    }
  }
}

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

Abhinav S5-Jul-12 0:47

Abhinav S

5-Jul-12 0:47

That is a nice workaround.

Build your own survey - http://www.factile.net

Wayne Gaylard5-Jul-12 2:20

Wayne Gaylard

5-Jul-12 2:20

You are too clever, sir !+5 Thumbs Up | :thumbsup:

When I was a coder, we worked on algorithms. Today, we memorize APIs for countless libraries — those libraries have the algorithms - Eric Allman

Bernhard Hiller5-Jul-12 2:56

5-Jul-12 2:56

My 5! It works.
I tested then with ComboBoxes and CheckBoxes, and fortunately they do not need such an extra treatment.

Pete O'Hanlon5-Jul-12 9:38

Binding Tooltip to template element

5-Jul-12 9:38

I blogged about this here[^], and I've uploaded this to CodeStash[^] as well.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

WPF Cascading filters

Ross Cain4-Jul-12 8:45

Ross Cain

4-Jul-12 8:45

I'm trying to use a series of cascading controls to filter a datagridview.
I've built a local sdf database and set up the datatable I wish to use in my gridview.

I created a combobox which I bound to my datatable and happily populates my regions
This then populates a second control (checkboxlist) which returns a set of checbox selections for the region selecetd in the combobox (This also works fine).

Finally I have my datagridview and this is where I have an issue.
The Grid is populated via the same table and fills as you select from the combobox but only for recordsets with the 1st terminal selection.

What I so far seem unable to do is work out how to use the checkboxlist to filter the datagridview.
I've tried adding a datatemplate and then code behind to create an observable collection but then my checkboxlist stopped working.

I'd really appreciate any advice or help on how to solve this as I'm sure it is simpler than I'm making it.

This is my XAML currently with the datatemplate though it seems to populate the checkboxlist fine without that template:

<Window.Resources>
    <my:VlogicaDataSet x:Key="vlogicaDataSet" />
    <CollectionViewSource x:Key="_Regions_ViewSource" Source="{Binding Path=_Regions_, Source={StaticResource vlogicaDataSet}}" />
    <CollectionViewSource x:Key="_Regions__Terminal_ViewSource" Source="{Binding Path=Regions$_Terminal$, Source={StaticResource _Regions_ViewSource}}" />
    <CollectionViewSource x:Key="_Regions__Terminal_GridViewViewSource" Source="{Binding Path=Terminal$_GridView, Source={StaticResource _Regions__Terminal_ViewSource}}" />
</Window.Resources>
<Grid>
    <GroupBox Header="Analysis Mode" Height="471" HorizontalAlignment="Left" Margin="12,185,0,0" Name="groupBox1" VerticalAlignment="Top" Width="1463" Foreground="Orange">
        <Grid DataContext="{StaticResource _Regions__Terminal_GridViewViewSource}">
            <TabControl Height="372" HorizontalAlignment="Left" Margin="14,18,0,0" Name="tabControl1" VerticalAlignment="Top" Width="235">
                <TabItem Header="Forecasting" Name="tabItem1">
                    <Grid DataContext="{StaticResource _Regions_ViewSource}">
                        <Label Content="Region Selection" Height="28" HorizontalAlignment="Left" Margin="6,17,0,0" Name="label1" VerticalAlignment="Top" FontWeight="Bold" />
                        <ComboBox DisplayMemberPath="GROUPNAME" Height="23" HorizontalAlignment="Left" ItemsSource="{Binding}" Margin="10,46,0,0" Name="_Regions_ComboBox" SelectedValuePath="GROUPNUM" VerticalAlignment="Top" Width="196">
                            <ComboBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel />
                                </ItemsPanelTemplate>
                            </ComboBox.ItemsPanel>
                        </ComboBox>
                        <xctk:CheckListBox DataContext="{Binding UpdateSourceTrigger=PropertyChanged}" ItemsSource="{Binding Source={StaticResource _Regions__Terminal_ViewSource}}" Margin="10,102,20,77" Name="clbTerminals" SelectedItems="{Binding}" SelectedMemberPath="IsSelected" SelectedValue="{Binding Path=SelectedValue}" ValueMemberPath="Level" DisplayMemberPath="NAME">
                            <ItemsControl>
                                <DataTemplate>
                                    <CheckBox IsChecked="{Binding Path=Selected}" Content="{Binding Path=Description}"/>
                                </DataTemplate>
                            </ItemsControl>
                        </xctk:CheckListBox>

And this was the code behind class for the observable collection:

public ObservableCollection<CheckedItem> List { get;set;}

public class CheckedItem
{
  public bool Selected { get; set; }
  public string Description { get; set; }
}

Though this currently returns a debug error on the Observablecollection which says expecting class delegate, enum, interface,structure.

This was code I found researching online for an answer and tried to adapt in my VS2010 project.

Blikkies4-Jul-12 3:31

Blikkies

4-Jul-12 3:31

Hey guys,

I have added a TextBlock in one of my ItemTemplate, How can I bind the element parent's tooltip text to my TextBlock text for example:

<TextBlock x:Name="SubText" TextWrapping="Wrap" Text="{Binding Tooltip, ElementsName=MyParent}" />

I know this is wrong, because the tooltip uses ToolTipService.

Thanks

Pete O'Hanlon4-Jul-12 3:40

4-Jul-12 3:40

There's nothing wrong with your sample there. That works perfectly well, assuming that MyParent is accessible to SubText.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

Blikkies4-Jul-12 4:01

Blikkies

4-Jul-12 4:01

I've try it but no luck,

"MyParent" is a ListBox control, i have created a DataTemplate where SubText TextBlock is in and i've tried to bind the lisbox tooltip to the subtext text but failed Miserably.

Pete O'Hanlon4-Jul-12 4:16

4-Jul-12 4:16

Why not just bind the tooltip in MyParent to the same element you are binding to as SubText?

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

vinodkrebc6-Jul-12 0:59

vinodkrebc

6-Jul-12 0:59

Hi You can create a custom control based on what control you are using as parent. If you are using ListBox it would be like below

public class CustomListBox : ListBox
   {
       public object ToolTip
       {
           get
           {
               return ToolTipService.GetToolTip(this);
           }
       }
   }

You xaml will look like below

XML

<local:CustomListBox ItemsSource="{Binding Path=CustomerList}"
                             ToolTipService.ToolTip="Your Tooltip"
                             x:Name="lstParent">
            <local:CustomListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=ToolTip, ElementName=lstParent}" />
                </DataTemplate>
            </local:CustomListBox.ItemTemplate>
        </local:CustomListBox>

Let me know if it works.
http://www.exploresilverlight.com
Cheers!
Vinod

Vinod

WPF Button Image Source

Kevin Marois2-Jul-12 11:47

Re: WPF Button Image Source

2-Jul-12 11:47

I created a button class:

public class ImageTextButton : Button
{
    public ImageSource NormalImageSource
    {
        get { return (ImageSource)GetValue(NormalImageSourceProperty); }
        set { SetValue(NormalImageSourceProperty, value); }
    }
    public static readonly DependencyProperty NormalImageSourceProperty =
        DependencyProperty.Register("NormalImageSource", typeof(ImageSource), typeof(ImageTextButton), new UIPropertyMetadata(null));


    public ImageSource MouseOverImageSource
    {
        get { return (ImageSource)GetValue(MouseOverImageSourceProperty); }
        set { SetValue(MouseOverImageSourceProperty, value); }
    }
    public static readonly DependencyProperty MouseOverImageSourceProperty =
        DependencyProperty.Register("MouseOverImageSource", typeof(ImageSource), typeof(ImageTextButton), new UIPropertyMetadata(null));


    public string Caption
    {
        get { return (string)GetValue(CaptionProperty); }
        set { SetValue(CaptionProperty, value); }
    }
    public static readonly DependencyProperty CaptionProperty =
        DependencyProperty.Register("Caption", typeof(string), typeof(ImageTextButton), new UIPropertyMetadata(null));
}

and I use it like this:

<controls:ImageTextButton Caption="Test"
                            NormalImageSource="Images/metro_save_disabled_48.png"
                            MouseOverImageSource="Images/metro_save_enabled_48.png"
                            Style="{StaticResource ImageTextButton}"
                            Grid.Row="1"
                            Grid.Column="1"/>

In the button's ControlTemplate I'm doing:

<ControlTemplate.Triggers>
    <Trigger Property="Button.IsMouseOver" Value="True">
        <Setter TargetName="ButtonImage" Property="Source" Value="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverImageSource}" />
    </Trigger>
</ControlTemplate.Triggers>

but it doesn't work. The image doesn't change. It disappears. Anyone know the right way to do this?

Thanks

If it's not broken, fix it until it is

Unnikrishnan_S_N3-Jul-12 2:14

Unnikrishnan_S_N

3-Jul-12 2:14

Hi Kevin,

Just updating the source won't work. You have to update the Button Content.
for ex:

<button.content>
<stackpanel>

<image.source>
<BitmapImage UriSource="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverImageSource}" />

XML

<ControlTemplate.Triggers>
    <Trigger Property="Button.IsMouseOver" Value="True">
        <Setter TargetName="ButtonImage" Property="Content"/> <Setter.Value>
<StackPanel>
<Image>
<Image.Source>
<BitmapImage UriSource="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverImageSource}" />
</Image.Source>
</Image>
</StackPanel>
<Setter.Value/>
    </Trigger>
</ControlTemplate.Triggers>

I think this should work..

Re: WPF Button Image Source

Kevin Marois5-Jul-12 11:01

Re: WPF Button Image Source

5-Jul-12 11:01

Thanks

virusattack wrote:
<Button>
< Button.Content>
<stackpanel>
< Image>

< Image.Source>
< BitmapImage UriSource="{Binding
RelativeSource={RelativeSource Self}, Path=MouseOverImageSource}" />

< /Image.Source>
< /Image>

< /Button.Content>

Where does this code go in the style?

If it's not broken, fix it until it is

Unnikrishnan_S_N8-Jul-12 19:50

Unnikrishnan_S_N

8-Jul-12 19:50

Hi Kevin,

check in Trigger whether Button's IsMouseOver is true and set the property Content with the following values.

XML

<ControlTemplate.Triggers>
    <Trigger Property="Button.IsMouseOver" Value="True">
        <Setter TargetName="ButtonImage" Property="Content"/> <Setter.Value>
<StackPanel>
<Image>
<Image.Source>
<BitmapImage UriSource="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverImageSource}" />
</Image.Source>
</Image>
</StackPanel>
<Setter.Value/>
    </Trigger>
</ControlTemplate.Triggers>

WPF Button Style Problem

Kevin Marois2-Jul-12 11:31

2-Jul-12 11:31

[UPDATE]

I set the TargetName property and it works now

<ControlTemplate.Triggers>
    <Trigger Property="Button.IsMouseOver" Value="True">
        <Setter TargetName="ButtonCaption" Property="FontWeight" Value="Bold"/>
        <Setter TargetName="ButtonCaption" Property="Foreground" Value="#03AEDA"/>
        <Setter TargetName="ButtonImage" Property="Source" Value="Images/metro_save_enabled_48.png" />
    </Trigger>
</ControlTemplate.Triggers

>

I created a button class that has Normal and MouseOver image properties. I want to change the image when the mouse is over the button.

public class ImageTextButton : Button
{
    public ImageSource NormalImageSource
    {
        get { return (ImageSource)GetValue(NormalImageSourceProperty); }
        set { SetValue(NormalImageSourceProperty, value); }
    }
    public static readonly DependencyProperty NormalImageSourceProperty =
        DependencyProperty.Register("NormalImageSource", typeof(ImageSource), typeof(ImageTextButton), new UIPropertyMetadata(null));


    public ImageSource MouseOverImageSource
    {
        get { return (ImageSource)GetValue(MouseOverImageSourceProperty); }
        set { SetValue(MouseOverImageSourceProperty, value); }
    }
    public static readonly DependencyProperty MouseOverImageSourceProperty =
        DependencyProperty.Register("MouseOverImageSource", typeof(ImageSource), typeof(ImageTextButton), new UIPropertyMetadata(null));


    public string Caption
    {
        get { return (string)GetValue(CaptionProperty); }
        set { SetValue(CaptionProperty, value); }
    }
    public static readonly DependencyProperty CaptionProperty =
        DependencyProperty.Register("Caption", typeof(string), typeof(ImageTextButton), new UIPropertyMetadata(null));
}

Here's my button style:

<Window.Resources>

    <Style TargetType="{x:Type controls:ImageTextButton}"
            x:Key="ImageTextButton">

        <Setter Property="Height" Value="55"/>
        <Setter Property="Width" Value="135"/>

        <Setter Property="Template">
                
            <Setter.Value>
                    
                <ControlTemplate TargetType="{x:Type controls:ImageTextButton}">

                    <Border BorderBrush="DarkGray"
                            BorderThickness="1"
                            CornerRadius="3">
                            
                        <StackPanel Orientation="Horizontal"
                                    HorizontalAlignment="Center">

                            <Image x:Name="ButtonImage"
                                    Source="{TemplateBinding NormalImageSource}"
                                    Height="48"
                                    Width="48"
                                    Margin="3"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Stretch="Fill"/>

                            <TextBlock x:Name="ButtonCaption"
                                        Text="{TemplateBinding Caption}"
                                        Grid.Row="1"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Foreground="DarkGray"
                                        FontSize="18"/>

                        </StackPanel>
                            
                    </Border>
                        
                    <ControlTemplate.Triggers>
                        <Trigger  Property="TextBlock.IsMouseOver" Value="True">
                            <Setter Property="TextBlock.FontWeight" Value="Bold"/>
                            <Setter Property="TextBlock.Foreground" Value="SteelBlue"/>
                        </Trigger>
                        <Trigger  Property="Image.IsMouseOver" Value="True">
                            <Setter Property="Image.Source" Value="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverImageSource}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                        
                </ControlTemplate>

            </Setter.Value>
                
        </Setter>
                    
    </Style>

</Window.Resources>

and how I'm using it:

When I mouse over the button, the Caption's color stays gray, and the image doesn't change. Also, the caption only gets Bold when I mouse over the caption, nit the button.

Anyone see what's wrong?

Thanks

If it's not broken, fix it until it is

modified 2-Jul-12 17:42pm.

Style Error

Kevin Marois29-Jun-12 7:51