none
[UWP][XAML]Slider/TextBox Binding RRS feed

  • Question

  • I'm sure there is a reasonably simple solution for this, but I'm not sure what it is. I have a DataTemplate with a Slider and TextBox as follows:
    <DataTemplate x:Key="DisplayRoutesPieces">
    	<Grid Grid.Row="1" Background="{Binding PlayerColor,Converter={StaticResource PlayerColors}}" Width="224">
    		<Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions>
    		<Grid.RowDefinitions><RowDefinition Height="109"/></Grid.RowDefinitions>
    		<Slider LargeChange="1" Maximum="25" Minimum="0" Orientation="Horizontal" SmallChange="1" Value="{Binding ExchangedPieces}"/>
    		<TextBlock Grid.Column="1" Text="-" TextAlignment="Right"/>
    		<TextBox Grid.Column="2" InputScope="Digits" TextAlignment="Right"/>
    	</Grid>
    </DataTemplate>
    I want the user to be able to edit the TextBox using the Value property of the Slider, and vice versa. First of all, I need to know how to make the two stay synchronized, and also raise an event for only one of them when the value is changed (ValueChanged for the Slider or TextChanged for the TextBox, but not both) so that I can save the new value. I know how to add the events by including them in the XAML, but I am not sure how to keep the two synchronized. Does anybody have any good suggestions or examples? Thanks.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Wednesday, July 6, 2016 10:09 PM

Answers

  • Hi Nathan Sokalski,

    In my experience, you could use binding to get your target. You would need to bind the slider's value to Text property of TextBox, and remember to set the "Mode" property value as "TwoWay".

    Please refer to my following code for reference:

    <Slider LargeChange="1" Maximum="25" Minimum="0" Orientation="Horizontal" SmallChange="1" Value="{Binding Text,ElementName=txtb,Mode=TwoWay}"/>
                
                <TextBox x:Name="txtb"  InputScope="Digits" TextAlignment="Right"/>

    Best Regards,

    Xavier Eoro


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, July 7, 2016 8:42 AM
    Moderator

All replies

  • Hello

    you can also bind the ExchangedPieces to the TextBox Text property, and then set the binding mode to TwoWay when you want something to get updated both from the ui and from a change in your viewmodel, for example

    <Slider LargeChange="1" Maximum="25" Minimum="0" Orientation="Horizontal" SmallChange="1" Value="{Binding ExchangedPieces, Mode=TwoWay}"/>


    Thursday, July 7, 2016 1:01 AM
  • Hi Nathan Sokalski,

    In my experience, you could use binding to get your target. You would need to bind the slider's value to Text property of TextBox, and remember to set the "Mode" property value as "TwoWay".

    Please refer to my following code for reference:

    <Slider LargeChange="1" Maximum="25" Minimum="0" Orientation="Horizontal" SmallChange="1" Value="{Binding Text,ElementName=txtb,Mode=TwoWay}"/>
                
                <TextBox x:Name="txtb"  InputScope="Digits" TextAlignment="Right"/>

    Best Regards,

    Xavier Eoro


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, July 7, 2016 8:42 AM
    Moderator
  • I like your approach Xavier, how would you get the ExchangedPieces value from the viewmodel or update it in this case? Maybe using binding with the text property of the textbox

    Thursday, July 7, 2016 9:50 AM