如何在 Universal Windows 平台上连接 Combo Box 和 Image？

Question

我只是想将组合框连接到图像。这意味着当我 select 组合框中的任何选项时，组合框会向我显示该选项的图像。请帮助我知道如何执行此操作？

Answer 1

实现此行为的最简单方法是在通过处理 ComboBox.SelectionChanged 更改 ComboBox.SelectedItem 时更改图像源事件.

这是一个简单的演示，说明它是如何工作的。首先，创建一个 ComboBox 控件并为其提供一些关于位置的数据。然后在后面的代码中处理 ComboBox.SelectionChanged 事件 并获取所选项目。现在您可以检查选择的值并更改图像的来源。

XAML:

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <ComboBox x:Name="LocationComboBox" Header="Location" Height="60" Width="296" ItemsSource="{x:Bind source}" SelectionChanged="LocationComboBox_SelectionChanged">
        <ComboBox.ItemTemplate>
            <DataTemplate x:DataType="local:LocationData">
                <Grid>
                    <TextBlock Text="{x:Bind location}"/>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
    <Image x:Name="LocationImage" Grid.Row="1"/>
</Grid>

代码隐藏:

 public sealed partial class MainPage : Page
{
    public List<LocationData> source { get; set; }
    public MainPage()
    {
        this.InitializeComponent();

        source = new List<LocationData>();
        source.Add(new LocationData { location = "london" });
        source.Add(new LocationData { location = "paris" });
        source.Add(new LocationData { location = "seattle" });
        source.Add(new LocationData { location = "vancouver" });
        
    }

    private void LocationComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        LocationData data = LocationComboBox.SelectedItem as LocationData;
        switch (data.location)
        {
            case "london":
                LocationImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/london.png"));
                break;
            case "paris":
                LocationImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/paris.png"));
                break;
            case "seattle":
                LocationImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/seattle.png"));
                break;
            case "Rvancouvered":
                LocationImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/vancouver.png"));
                break;
        }
    }
}


public class LocationData
{
    public string location { get; set; }
}

您可以根据自己的需要进行更改。

Answer 2

我正在使用组合框，想将组合框属性与图像连接起来，所以我按照这些步骤找到了解决方案。

XAML:

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
        <ComboBox x:Name="imageViewer" Width="200" Header="Picture" PlaceholderText="LifePicture" SelectionChanged="imageViewer_SelectionChanged" SelectedItem="{Binding Source, Mode=OneWay}" >
            <x:String>America</x:String>
            <x:String>Bombey</x:String>
            <x:String>China</x:String>
            <x:String>Delhi</x:String>
        </ComboBox>
        <Image x:Name="PictureView" Height="150" Width="150"
           Margin="0,8,0,0" HorizontalAlignment="Left" />
       

    </StackPanel>
</Grid>

代码隐藏：

 private void imageViewer_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        string imageName = imageViewer.SelectedItem.ToString();
       
      
       if(imageName == "America")
        {
            PictureView.Source = new BitmapImage(new Uri("ms-appx:///Assets/a.jpg"));
        }
       else if (imageName == "Bombey")
        {
            PictureView.Source = new BitmapImage(new Uri("ms-appx:///Assets/b.jpg"));
        }
        else if (imageName == "China")
        {
            PictureView.Source = new BitmapImage(new Uri("ms-appx:///Assets/c.jpg"));
        }
        else if (imageName == "Delhi")
        {
            PictureView.Source = new BitmapImage(new Uri("ms-appx:///Assets/d.jpg"));
        }

    }

如何在 Universal Windows 平台上连接 Combo Box 和 Image？

How to connect Combo Box with Image in Universal Windows Platform?

c#

xaml

uwp