Control size of ListBoxItem (with DataTemplate) using RadioButtons - silverlight

Question

I´m displaying images in a ListBox and i want to control the size (small, medium, big) of the images with RadionButtons. The ItemsSource of the ListBox is bound to a property of a viewmodel. My current solution is to use an Image for each size and bind the Visibility of each Image to the IsChecked property to the corresponding RadioButton. But i wonder if there is a better solution to get it work, especially using bindings and not duplicating items for various sizes. Using animations for the size changes would also be great.
Here´s what i have so far.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox ItemsSource="{Binding Images}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Image x:Name="smallImage" Width="80" Height="45" Source="{Binding}" Visibility="{Binding IsChecked, ElementName=SmallSizeChecked, Converter={StaticResource boolToVisibility}}" />
<Image x:Name="mediumImage" Width="160" Height="90" Source="{Binding}" Visibility="{Binding IsChecked, ElementName=MediumSizeChecked, Converter={StaticResource boolToVisibility}}"/>
<Image x:Name="bigImage" Width="320" Height="180" Source="{Binding}" Visibility="{Binding IsChecked, ElementName=BigSizeChecked, Converter={StaticResource boolToVisibility}}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<RadioButton Content="small" Margin="0,0,10,0" GroupName="ItemSize" x:Name="SmallSizeChecked" />
<RadioButton Content="medium" Margin="0,0,10,0" GroupName="ItemSize" x:Name="MediumSizeChecked" IsChecked="True" />
<RadioButton Content="big" GroupName="ItemSize" x:Name="BigSizeChecked"/>
</StackPanel>
</Grid>

Answer 1

This can be easily achieved by using IValueConverters with parameters.
here is more elegant way then converters. i have not compiled it but will work after some fixes.
C#:
public class VM
{
public List<string> Images { get; set; }
public bool SmallSizeChecked { get; set; }
public bool MediumSizeChecked { get; set; }
public bool BigSizeChecked { get; set; }
public int size
{
get
{
if(SmallSizeChecked) return 100;
if(MediumSizeChecked) return 200;
if(BigSizeChecked) return 300;
return 100;
}
}
}
XAML:
<local:VM x:Key="mv" />
<RadioButton x:name="SmallSizeChecked" ischecked="{Binding mv.SmallSizeChecked, Mode=Twoway}"/>
<RadioButton x:name="MediumSizeChecked" ischecked="{Binding mv.MediumSizeChecked, Mode=Twoway/>
<RadioButton x:name="BigSizeChecked" ischecked="{Binding mv.BigSizeChecked, Mode=Twoway}"/>
<ListBox ItemsSource="{Binding mv.Images}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Image x:Name="img" Source="{Binding}" Width="80" Height="{Binding Path=size,Source={staticResource mv}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'm sure you will get the idea and will extend it for Width property too.
Dipak.