CODEWITHSUNDEEP
silverlightxamlsilverlight-4.0listboxdatatemplate
Jehof
Jehof

Reputation: 35544

Control size of ListBoxItem (with DataTemplate) using RadioButtons

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>

Upvotes: 1

Views: 458

Answers (1)

dipak
dipak

Reputation: 2033

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.

Upvotes: 3

Related Questions