如何在XAML中绑定组合框中的项目

Question

<TextBlock FontSize="20" Foreground="{x:Bind ????}">
    <Run Text="{x:Bind Username}"></Run>
    <Run Text=": "></Run>
    <Run Text="{x:Bind Message}"></Run>
</TextBlock>

That is the TextBlock. My expectation is when the textblock get the string inside the combobox it will set the foreground through that string

<ComboBox 
    x:Name="CBBox" 
    PlaceholderText="Color" 
    Margin="10" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center">
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
    <x:String>Green</x:String>
    <x:String>Purple</x:String>
    <x:String>Back</x:String>
</ComboBox>

but I dont know what to bind any idea ?

Answer 1

Usually, the best approach is to bind the ComboBox to the view model, and then bind the view model to the TextBlock.

However, it's possible to bind them directly, provided they're in the same scope (Page, UserControl, Template, etc.). You'll have to use {Binding} here, instead of {x:Bind} , since this you'll need a converter.

You can bind the Foreground property like this:

<TextBox Foreground="{Binding SelectedItem, ElementName=CBBox, Converter={StaticResource StringToColorConverter}" ... />

Now you'll need to add a ValueConverter , and get it to convert the selected string to a brush and return it.

Something like this should work:

var colorEnum = (Colors) Enum.Parse(typeof(Colors), value);
var color = new Color(colorEnum);
return new SolidColorBrush(color);

Answer 2

Foreground="{Binding ElementName=CBBox,Path=SelectedItem}"

<ComboBox 
    x:Name="CBBox" 
    PlaceholderText="Color" 
    Margin="10" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center">
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
    <x:String>Green</x:String>
    <x:String>Purple</x:String>
    <x:String>Back</x:String>
</ComboBox>
<TextBlock FontSize="20" Foreground="{Binding ElementName=CBBox,Path=SelectedItem}">
    <Run Text="{x:Bind Username}"></Run>
    <Run Text=": "></Run>
    <Run Text="{x:Bind Message}"></Run>
</TextBlock>