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>

Martin Zikmund · Answer 1 · 2018-02-20T10:47:26.170

1

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

edited Feb 20 '18 at 10:47

answered Feb 20 '18 at 10:31

Martin Zikmund

38,440
7
70
91

but combobox should list the items in string (ONE,TWO,THREE ..) format. – nsds Feb 20 '18 at 10:40
In that case the second solution will be the best. You will display the string property and use the int in code – Martin Zikmund Feb 20 '18 at 10:42
Please see my edited code. It displays empty on selected item – nsds Feb 21 '18 at 10:07
So, if I understand correctly, the selected item should look like a number while all others should be texts? – Martin Zikmund Feb 21 '18 at 10:23
Yes that's what I want – nsds Feb 21 '18 at 10:41
In that case you will have to implement the full solution by @Barry Wang – Martin Zikmund Feb 21 '18 at 10:43

score 1 · Accepted Answer · answered Feb 21 '18 at 07:08

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;
    }
}

Wang Please see my edited code. It displays empty on selected item — nsds, Feb 21 '18 at 10:06
@nsds please use my full code instead of coding yourself. Martin's answer suppose that you only want to change from "Text" to "Number" for both the selection and dropdown. But as you've mentioned you want the selection as "Number" and dropdown as "Text", then you need to use my code to switch your template. — Barry Wang, Feb 22 '18 at 00:17
it works well ! can I set combobox1.SelectedItem = 5; as default? when page first load it should show 5 as selected item.is it possible? — nsds, Feb 22 '18 at 04:18
@nsds just set selectedindex as 4, then the default selection will be 5. — Barry Wang, Feb 22 '18 at 04:44

Change the text of ComboBox selected item - UWP

2 Answers2