CODEWITHSUNDEEP
c#comboboxuwp
nsds
nsds

Reputation: 981

Change the text of ComboBox selected item - UWP

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>

Upvotes: 0

Views: 1827

Answers (2)

Barry Wang
Barry Wang

Reputation: 1469

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

Upvotes: 1

Martin Zikmund
Martin Zikmund

Reputation: 39102

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

Upvotes: 1

Related Questions