I was just trying to connect the combo box to the Image. This means when I select any option in Combo Box then Combo Box shows me an Image of that Option. Please help me to know how to do this?

CodePudding user response：

The easiest way to achieve this behavior is to change the image source when the ComboBox.SelectedItem is changed by handling the ComboBox.SelectionChanged event.

Here is a simple demo of how it works. First of all, create a ComboBox control and give it some data about the locations. Then handling the ComboBox.SelectionChanged event in the code behind and get the selected item. Now you could check the selected value and change the source of the image.

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>

Code-behind:

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

You could change it based on your own requirenments.

CodePudding user response：

For connect combo box with image , I followed these step--

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>

Code-Behind:

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

    }