none
CHANGE DISPLAYED IMAGE ACCORDING TO RADIO BUTTON SELECTION

    Question

  •  

    Hello!

     

    I would like to display different images according to the radio button selected.

     

    My Radiobuttons are Apples, Banana, Mango.

    Each time a fruit is selected, I want to display an image of that fruit in another part of my Dialog.

     

     

    How do i do this in the code-behind file?

    Tuesday, December 11, 2007 9:58 AM

Answers

  • I did a similar sample but just that i display the image on click of a button using a search text....

     

    XAML Code

    <Window x:Class="ClipArtSearch.Window1" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ClipArtSearch" Height="300" Width="300"

    Name="ClipArtSearchWindow" >

    <Grid>

    <Grid.Resources>

    <DataTemplate x:Key="clipArtItemTemplate">

    <Image Source="{Binding Path=ImageUri}" Height="100" Width="100"/>

    </< FONT>DataTemplate>

    </< FONT>Grid.Resources>

    <Grid.RowDefinitions>

    <RowDefinition Height="40"/>

    <RowDefinition Height="*"/>

    </< FONT>Grid.RowDefinitions>

    <Grid Grid.Row="0" Grid.Column="0">

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="200"/>

    <ColumnDefinition Width="50"/>

    </< FONT>Grid.ColumnDefinitions>

    <TextBox Name="txtClipArt" Grid.Column="0"/>

    <Button Name="btnSearch" Grid.Column="1">Search</< FONT>Button>

    </< FONT>Grid>

    <ListBox Name="lstImages" Grid.Row="1"

    ItemsSource="{Binding ElementName=ClipArtSearchWindow, Path=ImageCollectionView}"

    ItemTemplate="{StaticResource clipArtItemTemplate}">

    </< FONT>ListBox>

    </< FONT>Grid>

    </< FONT>Window>

     

    In the c# code below we add the images to the image List and each image inside the list has a 'Tag' property set. To search for each image type the tag (Case sensitive) and click on search will display only those images. You could do similarly....

    C# Code

    using System;

    using System.Collections.Generic;

    using System.Text;

    using System.Windows;

    using System.Windows.Controls;

    using System.Windows.Data;

    using System.Windows.Documents;

    using System.Windows.Input;

    using System.Windows.Media;

    using System.Windows.Media.Imaging;

    using System.Windows.Shapes;

     

    namespace ClipArtSearch

    {

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : System.Windows.Window

    {

     

    public CollectionView ImageCollectionView

    {

    get { return (CollectionView)GetValue(ImageCollectionViewProperty); }

    set { SetValue(ImageCollectionViewProperty, value); }

    }

    // Using a DependencyProperty as the backing store for ImageCollectionView. This enables animation, styling, binding, etc...

    public static readonly DependencyProperty ImageCollectionViewProperty =

    DependencyProperty.Register("ImageCollectionView", typeof(CollectionView), typeof(Window1), new UIPropertyMetadata(null));

     

    public Window1()

    {

    InitializeComponent();

    List<ImageInfo> imageList = new List<ImageInfo>();

    imageList.Add(new ImageInfo(new Uri(@"c:\images\1.png"), "One"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\2.png"), "Two"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\3.png"), "Three"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\4.png"), "Four"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\5.png"), "One"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\6.png"), "Six"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\7.png"), "Seven"));

    ImageCollectionView = (CollectionView)CollectionViewSource.GetDefaultView(imageList);

    btnSearch.Click += new RoutedEventHandler(btnSearch_Click);

    }

    void btnSearch_Click(object sender, RoutedEventArgs e)

    {

    ImageCollectionView.Filter = new Predicate<Object>(delegate(object imgInfo)

    {

    ImageInfo info = imgInfo as ImageInfo;

    if (txtClipArt.Text == String.Empty)

    {

    return true;

    }

    if (info.Tag == txtClipArt.Text)

    return true;

    return false;

    });

    }

    static bool search<ImageInfo>(ImageInfo imgInfo)

    {

    return false;

    }

    }

    public class ImageInfo

    {

    public ImageInfo()

    {

    }

    public ImageInfo(Uri imageUri, string tag)

    {

    ImageUri = imageUri;

    Tag = tag;

    }

    private Uri _imageUri;

    public Uri ImageUri

    {

    get { return _imageUri; }

    set { _imageUri = value; }

    }

    private string _tag;

    public string Tag

    {

    get { return _tag; }

    set { _tag = value; }

    }

    }

    }

     

    Hope this helps... Please let me know if this does not work by any means...
    Tuesday, December 11, 2007 9:17 PM
  • I've quickly mocked up with a XAMLPad ready example of how to impelement this feature in pure XAML form:

    Code Block

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Page.Resources>
            <XmlDataProvider x:Key="data" XPath="Images/Image">
                <x:XData>
                    <Images xmlns="">
                        <Image
                            Name="Apple"
                            Source="http://blogs.sun.com/Sun_on_Health/resource/kaiser_data/Green_Apple.jpg"/>
                        <Image
                            Name="Banana"
                            Source="http://pested.ifas.ufl.edu/newsletters/september2007/banana.gif"/>
                        <Image
                            Name="Mango"
                            Source="http://importfood.com/media/mango1l.jpg"/>
                    </Images>
                </x:XData>
            </XmlDataProvider>
        </Page.Resources>
        <DockPanel DataContext="{Binding Source={StaticResource data}}">
            <ListBox
                ItemsSource="{Binding}"
                DockPanel.Dock="Top"
                IsSynchronizedWithCurrentItem="True">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel
                            IsVirtualizing="True"
                            Orientation="Horizontal"
                            IsItemsHost="True"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <RadioButton
                            Margin="5"
                            IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"
                            Content="{Binding XPath=@Name}"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <Image Source="{Binding XPath=@Source}"/>
        </DockPanel>
    </Page>


    Hope this helps
    Thursday, December 13, 2007 7:55 AM

All replies

  • Hi,

    There are so many ways of doing that. It always depends on your context.

    One possible way, and not knowing  your context would consist in subscribing the Checked event and make the other part of your dialog show the corresponding data. But that would be very anti WPF.

    Maybe you should post a little bit of your context if you need more help than this.

    Nuno
    Tuesday, December 11, 2007 4:42 PM
  • I did a similar sample but just that i display the image on click of a button using a search text....

     

    XAML Code

    <Window x:Class="ClipArtSearch.Window1" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ClipArtSearch" Height="300" Width="300"

    Name="ClipArtSearchWindow" >

    <Grid>

    <Grid.Resources>

    <DataTemplate x:Key="clipArtItemTemplate">

    <Image Source="{Binding Path=ImageUri}" Height="100" Width="100"/>

    </< FONT>DataTemplate>

    </< FONT>Grid.Resources>

    <Grid.RowDefinitions>

    <RowDefinition Height="40"/>

    <RowDefinition Height="*"/>

    </< FONT>Grid.RowDefinitions>

    <Grid Grid.Row="0" Grid.Column="0">

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="200"/>

    <ColumnDefinition Width="50"/>

    </< FONT>Grid.ColumnDefinitions>

    <TextBox Name="txtClipArt" Grid.Column="0"/>

    <Button Name="btnSearch" Grid.Column="1">Search</< FONT>Button>

    </< FONT>Grid>

    <ListBox Name="lstImages" Grid.Row="1"

    ItemsSource="{Binding ElementName=ClipArtSearchWindow, Path=ImageCollectionView}"

    ItemTemplate="{StaticResource clipArtItemTemplate}">

    </< FONT>ListBox>

    </< FONT>Grid>

    </< FONT>Window>

     

    In the c# code below we add the images to the image List and each image inside the list has a 'Tag' property set. To search for each image type the tag (Case sensitive) and click on search will display only those images. You could do similarly....

    C# Code

    using System;

    using System.Collections.Generic;

    using System.Text;

    using System.Windows;

    using System.Windows.Controls;

    using System.Windows.Data;

    using System.Windows.Documents;

    using System.Windows.Input;

    using System.Windows.Media;

    using System.Windows.Media.Imaging;

    using System.Windows.Shapes;

     

    namespace ClipArtSearch

    {

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : System.Windows.Window

    {

     

    public CollectionView ImageCollectionView

    {

    get { return (CollectionView)GetValue(ImageCollectionViewProperty); }

    set { SetValue(ImageCollectionViewProperty, value); }

    }

    // Using a DependencyProperty as the backing store for ImageCollectionView. This enables animation, styling, binding, etc...

    public static readonly DependencyProperty ImageCollectionViewProperty =

    DependencyProperty.Register("ImageCollectionView", typeof(CollectionView), typeof(Window1), new UIPropertyMetadata(null));

     

    public Window1()

    {

    InitializeComponent();

    List<ImageInfo> imageList = new List<ImageInfo>();

    imageList.Add(new ImageInfo(new Uri(@"c:\images\1.png"), "One"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\2.png"), "Two"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\3.png"), "Three"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\4.png"), "Four"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\5.png"), "One"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\6.png"), "Six"));

    imageList.Add(new ImageInfo(new Uri(@"c:\images\7.png"), "Seven"));

    ImageCollectionView = (CollectionView)CollectionViewSource.GetDefaultView(imageList);

    btnSearch.Click += new RoutedEventHandler(btnSearch_Click);

    }

    void btnSearch_Click(object sender, RoutedEventArgs e)

    {

    ImageCollectionView.Filter = new Predicate<Object>(delegate(object imgInfo)

    {

    ImageInfo info = imgInfo as ImageInfo;

    if (txtClipArt.Text == String.Empty)

    {

    return true;

    }

    if (info.Tag == txtClipArt.Text)

    return true;

    return false;

    });

    }

    static bool search<ImageInfo>(ImageInfo imgInfo)

    {

    return false;

    }

    }

    public class ImageInfo

    {

    public ImageInfo()

    {

    }

    public ImageInfo(Uri imageUri, string tag)

    {

    ImageUri = imageUri;

    Tag = tag;

    }

    private Uri _imageUri;

    public Uri ImageUri

    {

    get { return _imageUri; }

    set { _imageUri = value; }

    }

    private string _tag;

    public string Tag

    {

    get { return _tag; }

    set { _tag = value; }

    }

    }

    }

     

    Hope this helps... Please let me know if this does not work by any means...
    Tuesday, December 11, 2007 9:17 PM
  • I've quickly mocked up with a XAMLPad ready example of how to impelement this feature in pure XAML form:

    Code Block

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Page.Resources>
            <XmlDataProvider x:Key="data" XPath="Images/Image">
                <x:XData>
                    <Images xmlns="">
                        <Image
                            Name="Apple"
                            Source="http://blogs.sun.com/Sun_on_Health/resource/kaiser_data/Green_Apple.jpg"/>
                        <Image
                            Name="Banana"
                            Source="http://pested.ifas.ufl.edu/newsletters/september2007/banana.gif"/>
                        <Image
                            Name="Mango"
                            Source="http://importfood.com/media/mango1l.jpg"/>
                    </Images>
                </x:XData>
            </XmlDataProvider>
        </Page.Resources>
        <DockPanel DataContext="{Binding Source={StaticResource data}}">
            <ListBox
                ItemsSource="{Binding}"
                DockPanel.Dock="Top"
                IsSynchronizedWithCurrentItem="True">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel
                            IsVirtualizing="True"
                            Orientation="Horizontal"
                            IsItemsHost="True"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <RadioButton
                            Margin="5"
                            IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"
                            Content="{Binding XPath=@Name}"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <Image Source="{Binding XPath=@Source}"/>
        </DockPanel>
    </Page>


    Hope this helps
    Thursday, December 13, 2007 7:55 AM