Change the text of ComboBox selected item - UWP

Question

I'm binding values to a combobox from a List. It lists numbers from one to five. Now I want to show the selected number in its numeric format. Means when a user selects "Four" from combobox , then the selected item of combobox should show as it's numeric form "4". Is it possible in UWP?

List<Item> available_Nums = new List<Item>();
        available_Nums.Add(new Item { Number = 1, Text = "One" });
        available_Nums.Add(new Item { Number = 2, Text = "Two" });
        available_Nums.Add(new Item { Number = 3, Text = "Three" });
        available_Nums.Add(new Item { Number = 4, Text = "Four" });
        available_Nums.Add(new Item { Number = 5, Text = "Five" });
        ComboBox2.ItemsSource = available_Nums;

  private void ComboBox2_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ComboBox2.SelectedItem = (ComboBox2.SelectedItem as Item).Number;
    }
 <ComboBox  x:Name="ComboBox2" SelectionChanged="ComboBox2_SelectionChanged"    Grid.Row="0"  Grid.ColumnSpan="2" HorizontalAlignment="Left">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock x:Name="comboTextBox" Text="{Binding Text}" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

Answer 1

Actually I recommend using the solution which works for WPF, you can refer to this thread .

In UWP we just need some simple modification then it will works. Here is the full code for you:

First of all, XAML code:

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <DataTemplate x:Key="selectedTemplate">
            <TextBlock Text="{Binding Path=Number}"/>
        </DataTemplate>
        <DataTemplate x:Key="dropDownTemplate">
            <TextBlock Text="{Binding Path=Text}"/>
        </DataTemplate>
        <local:ComboBoxItemTemplateSelector
                x:Key="itemTemplateSelector"
        SelectedTemplate="{StaticResource selectedTemplate}"
        DropDownTemplate="{StaticResource dropDownTemplate}"/>
    </Grid.Resources>
    <ComboBox ItemTemplateSelector="{StaticResource itemTemplateSelector}" x:Name="combobox1" HorizontalAlignment="Left"  Margin="372,432,0,0" Width="200" VerticalAlignment="Top"/>
</Grid>

Then code behind:

MainPage:

 public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        List<Item> available_Nums = new List<Item>();
        available_Nums.Add(new Item { Number = 1, Text = "One" });
        available_Nums.Add(new Item { Number = 2, Text = "Two" });
        available_Nums.Add(new Item { Number = 3, Text = "Three" });
        available_Nums.Add(new Item { Number = 4, Text = "Four" });
        available_Nums.Add(new Item { Number = 5, Text = "Five" });
        combobox1.ItemsSource = available_Nums;   
    }


}


public class Item
{
    public int Number { get; set; }
    public string Text { get; set; }
}

ComboBoxItemTemplateSelector class:

public class ComboBoxItemTemplateSelector:DataTemplateSelector
{
    public DataTemplate DropDownTemplate
    {
        get;
        set;
    }
    public DataTemplate SelectedTemplate
    {
        get;
        set;
    }
    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        ComboBoxItem comBoxItem = GetParent<ComboBoxItem>(container);
        if (comBoxItem != null)
        {
            return DropDownTemplate;
        }
        return SelectedTemplate;

    }

   internal static T GetParent<T>(object childobject) where T:DependencyObject
    {
        DependencyObject child = childobject as DependencyObject;
        while ((child != null) && !(child is T))
        {
            child = VisualTreeHelper.GetParent(child);
        }
        return child as T;
    }
}

Answer 2

You can do so using DataTemplate .

You can implement a ValueConverter that will convert the word to number and use it like this:

<ComboBox>
   <ComboBox.ItemTemplate>
      <DataTemplate>
         <TextBlock Text="{Binding Converter={StaticResource TextToNumberConverter}}" />
      </DataTemplate>
   </ComboBox.ItemTemplate>
</ComboBox>

Even better solution would be to create a class with both string and int property and bind to it instead of simple strings and then use the int property within the DataTemplate

public class Item
{
   public int Number {get;set;} 
   public string Text {get;set;} 
}

Create items like:

new Item() {Number =1, Text="One"}

DataTemplate will be:

<DataTemplate>
        <TextBlock Text="{Binding Text}" />
</DataTemplate>

And retrieving the selected value:

(comboBox.SelectedItem as Item).Number