Question

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

这是我到目前为止所拥有的。

    <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

使用带参数的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属性。

迪帕克。

使用RadioButtons控制ListBoxItem（使用DataTemplate）的大小

1 个答案: