Lost Focus on textbox in windows store apps

Question

Hello EveryBody!

I need to get value of the textbox when it lost focus in the Grid.Column="9"

Here is my XAML code on Windows Store apps, I'm using MVVM:

                  <ItemsControl ItemsSource="{Binding Order.Products, Mode=TwoWay}"
                                x:Name="ItemsControlOrderProducts">
                    <ItemsControl.ItemTemplate>
                      <DataTemplate>
                        <Grid  Height="60"
                               Margin="0 0 0 12"
                               Background="{StaticResource GrayLightSolidColorBrush}">
                          <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="15" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="25" />
                            <ColumnDefinition Width="140" />
                            <ColumnDefinition Width="40" />
                            <ColumnDefinition Width="57" />
                            <ColumnDefinition Width="110" />
                            <ColumnDefinition Width="57" />
                            <ColumnDefinition Width="85" />
                            <ColumnDefinition Width="130" />
                            <ColumnDefinition Width="80" />
                            <ColumnDefinition Width="80" />
                            <ColumnDefinition Width="15" />
                          </Grid.ColumnDefinitions>
                          <Grid Grid.Column="1"
                                Background="Transparent"
                                Margin="0 0 -12 0">
                            <controls:TkButton  Template="{StaticResource DeleteIcon}"
                                                Width="15"
                                                HorizontalAlignment="Center"
                                                Background="Transparent"
                                                VerticalAlignment="Top"
                                                Margin="-2 6 0 0"
                                                Command="{Binding DataContext.RemoveOrderProductCommand, ElementName=ItemsControlOrderProducts}"
                                                CommandParameter="{Binding}" />
                          </Grid>
                          <StackPanel Grid.Column="3"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center">
                            <TextBlock Text="{Binding Product.Label}"
                                       Style="{StaticResource BlueDarkLight16TextBlockStyle}"
                                       Width="140"
                                       TextTrimming="CharacterEllipsis" />
                            <TextBlock Text="{Binding Product.UnderProduct}"
                                       Style="{StaticResource DarkLightLight16TextBlockStyle}"
                                       Margin="10 0 0 0"
                                       Width="130"
                                       TextTrimming="CharacterEllipsis" />
                          </StackPanel>
                          <TextBlock Grid.Column="5"
                                     Text="{Binding Price}"
                                     Visibility="{Binding Price, Converter={StaticResource PricelistVisibilityConverter}}"
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Style="{StaticResource DarkLightLight16TextBlockStyle}" />
                          <TextBlock Grid.Column="7"
                                     Text="{Binding Balance}"
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Style="{StaticResource DarkLightLight16TextBlockStyle}" />
                          <TextBox Grid.Column="9"
                                   Text="{Binding Quantity, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, Converter={StaticResource DecimalToStringConverter} }"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   TextAlignment="Right"
                                   Width="70"
                                   FontFamily="Global User Interface">
                            <i:Interaction.Behaviors>
                              <core:EventTriggerBehavior EventName="LostFocus">
                                <core:InvokeCommandAction Command="{Binding DataContext.CalculateTotalCostCommand, ElementName=ItemsControlOrderProducts}"
                                                          CommandParameter="{Binding}" />
                              </core:EventTriggerBehavior>

                            </i:Interaction.Behaviors>
                          </TextBox>
                          <TextBlock Grid.Column="11"
                                     Text="{Binding TotalCost, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource DecimalToStringConverter}, Mode=TwoWay}"
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Foreground="{StaticResource BlueLightSolidColorBrush}"
                                     Style="{StaticResource DarkLightLight16TextBlockStyle}" />
                        </Grid>
                      </DataTemplate>
                    </ItemsControl.ItemTemplate>
                  </ItemsControl>

The problem is that it doesn't get the value of Text Property.

Someone have an idea?

Thanks

Answer 1

Getting the value of the Text property should be the same thing as getting the value of the Quantity property since you have bound the Text property of the TextBox to the Quantity source property. This is how you are supposed to handle this in MVVM.

<TextBox Grid.Column="9"
                                   Text="{Binding Quantity, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, Converter={StaticResource DecimalToStringConverter} }"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   TextAlignment="Right"
                                   Width="70"
                                   FontFamily="Global User Interface">
                            <i:Interaction.Behaviors>
                              <core:EventTriggerBehavior EventName="LostFocus">
                                <core:InvokeCommandAction Command="{Binding DataContext.CalculateTotalCostCommand, ElementName=ItemsControlOrderProducts}"
                                                          CommandParameter="{Binding Quantity}" />
                              </core:EventTriggerBehavior>

                            </i:Interaction.Behaviors>
                          </TextBox>

You could also try to bind to the actual TextBox itself using an ElementName:

<TextBox x:Name="tBox" Grid.Column="9"
                                   Text="{Binding Quantity, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, Converter={StaticResource DecimalToStringConverter} }"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   TextAlignment="Right"
                                   Width="70"
                                   FontFamily="Global User Interface">
                            <i:Interaction.Behaviors>
                              <core:EventTriggerBehavior EventName="LostFocus">
                                <core:InvokeCommandAction Command="{Binding DataContext.CalculateTotalCostCommand, ElementName=ItemsControlOrderProducts}"
                                                          CommandParameter="{Binding Path=Text, ElementName=tBox}" />
                              </core:EventTriggerBehavior>

                            </i:Interaction.Behaviors>
                          </TextBox>

Hope that helps.

Please remember to close your threads by marking helpful posts as answer and please start a new thread if you have a new question.

Answer 2

Hello Magnus,

I did it but the CommandParameters returns null everytime

Answer 3

Make sure that the command parameter type of your CalculateTotalCostCommand matches the type of the Quantity property (double, decimal or whatever the type is) or the TextBox.Text property (string) then.

Please post all relevant code parts to be able to reproduce your issue if you want any further help on this.

Please remember to close your threads by marking helpful posts as answer .

Answer 4

Ok!

Here is my XAML Code :

       <TextBox Grid.Column="9"
                                   Text="{Binding Quantity, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, Converter={StaticResource DecimalToStringConverter} }" 
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   TextAlignment="Right"
                                   Width="70"
                                   FontFamily="Global User Interface">
                            <i:Interaction.Behaviors>
                              <core:EventTriggerBehavior EventName="LostFocus">
                                <core:InvokeCommandAction Command="{Binding DataContext.CalculateTotalCostCommand, ElementName=ItemsControlOrderProducts}"
                                                          CommandParameter="{Binding}" />
                              </core:EventTriggerBehavior>
                            </i:Interaction.Behaviors>
                          </TextBox>
                          <TextBlock Grid.Column="11"
                                     Text="{Binding TotalCost, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource DecimalToStringConverter}, Mode=TwoWay}"
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Foreground="{StaticResource BlueLightSolidColorBrush}"
                                     Style="{StaticResource DarkLightLight16TextBlockStyle}" />

And my ViewModel :

  CalculateTotalCostCommand = new RelayCommand<Order_Product>(CalculateTotalCost);

    private void CalculateTotalCost(Order_Product orderProduct)
    {
      if ((orderProduct.Quantity > orderProduct.Balance) && (orderProduct.Balance > 0))
        ShowPopin(PopinEnum.ErrorQuanityOrder);
      orderProduct.TotalCost = orderProduct.Quantity * orderProduct.Price;
      CalculateTotal();

    }

I need to get the Quantity value from the textbox when the lostfocus event is raised.

Thanks

Answer 5

I have test @Magnus (MM8) code, it should work. Try to check it again.
https://msdn.microsoft.com/en-us/magazine/dn237302.aspx .