Размер элемента управления ListBoxItem (с DataTemplate) с помощью RadioButtons - PullRequest
Новая
       21

Размер элемента управления ListBoxItem (с DataTemplate) с помощью RadioButtons

1 голос
/ 07 декабря 2011

Я отображаю изображения в ListBox , и я хочу контролировать размер (маленький, средний, большой) изображений с помощью RadionButtons .ItemsSource объекта ListBox связан со свойством модели представления.Мое текущее решение состоит в том, чтобы использовать изображение для каждого размера и привязать видимость каждого изображения к свойству 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>

1 Ответ

3 голосов
/ 08 декабря 2011

Этого легко добиться, используя 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.

Дипак.

...