使用 RadioButtons 控制 ListBoxItem（带有 DataTemplate）的大小答案

【问题标题】：Control size of ListBoxItem (with DataTemplate) using RadioButtons使用 RadioButtons 控制 ListBoxItem（带有 DataTemplate）的大小
【发布时间】：2011-12-07 08:51:33
【问题描述】：

我在 ListBox 中显示图像，我想用 RadionButtons 控制图像的大小（小、中、大）。 ListBox 的 ItemsSource 绑定到视图模型的属性。我目前的解决方案是为每个尺寸使用一个 Image 并将每个 Image 的 Visibility 绑定到 IsChecked 属性到相应的 RadioButton。但我想知道是否有更好的解决方案让它工作，特别是使用绑定而不是复制各种尺寸的项目。使用动画来改变尺寸也很棒。

这是我目前所拥有的。

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

【问题讨论】：

标签： silverlight xaml silverlight-4.0 listbox datatemplate

【解决方案1】：

这可以通过使用带参数的 IValueConverters 轻松实现。

这里是比转换器更优雅的方式。我还没有编译它，但在一些修复后会工作。

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>

我相信你会明白这个想法并将其扩展到 Width 属性。

迪帕克。

【讨论】：