WPF一组拥有多种不同样式的容器

WPF一组拥有多种不同样式的容器

这种情况可以使用ListView或者ListBox，我用的ListView，具体ControlTemplate我本来准备用Grid的，因为我当时的需求是固定个数的数组，但是用了Grid，就全部在0行0列处叠起来，怎么改都没用，而且怎么查Stack Overflow也没找到具体方法，于是就放弃了，用的WrapPanel。

<ListView ItemTemplate="{DynamicResource RightItemTemplate}" ItemsSource="{Binding CurrentSheet.Chips}" SelectedItem="{Binding CurrentChip,Mode=OneWay}" Grid.Column="2" Background="White" Margin="10,0,60,24" Grid.Row="1" ItemContainerStyle="{DynamicResource ListViewItemStyle}">
                                    <ListView.Template>
                                        <ControlTemplate>
                                            <WrapPanel IsItemsHost="True"/>
                                        </ControlTemplate>
                                    </ListView.Template>
                                </ListView>

前端datetemplate

<DataTemplate x:Key="RightItemTemplate">
                <ItemsControl Width="93" Height="120" Template="{Binding ChipControlStatus, Converter={StaticResource ChipChange}}" Cursor="Hand" MouseLeftButtonDown="btnSPChip_PreviewMouseLeftButtonDown" Margin="{Binding IsDroplet,Converter={StaticResource MarginChange}}">
                    <ItemsControl.Visibility>
                        <MultiBinding Converter="{StaticResource RightVisibility}">
                            <Binding Path="ChipPosition" />
                            <Binding Path="IsDroplet" />
                        </MultiBinding>
                    </ItemsControl.Visibility>
                </ItemsControl>
            </DataTemplate>

定义一个ControlTemplate

<ControlTemplate x:Key="UnCheckedNoPhotoChips">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="93*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="17*"/>
        </Grid.RowDefinitions>
        <Grid>
            <Image Source="\Images\Chip.png"/>
            <Label Content="{Binding Position}"/>
        </Grid>
        <Label Grid.Row="2" Content="{Binding Sample}" FontSize="12" Height="17" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0"/>
    </Grid>
</ControlTemplate>

我们定义一个IValueConverter转换器，后台使用一个枚举值ChipControlStatus与ControlTemplate一对一对应，然后通过修改ChipControlStatus来改变Control的样式

声明一个IValueConverter转换器

<local:ChipControlStatusChanged x:Key="ChipChange"/>

定义一个IValueConverter转换器

public class ChipControlStatusChanged : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        try
        {
            return MainWindow.dictResource[(ChipControlStatus)value];
        }
        catch (Exception)
        {
            throw;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

MainWindow下定义一个静态变量

public static Dictionary<ChipControlStatus, ControlTemplate> dictResource = new Dictionary<ChipControlStatus, ControlTemplate>();

MainWindow构造函数下增加他的Dictionary，根据不同的ChipControlStatus枚举类型。其实我有好多个add的，就不一一举例了

dictResource.Add(ChipControlStatus.UnCheckedNoPhoto, (ControlTemplate)this.Resources["UnCheckedNoPhotoChips"]);

固定行数的ListView

用下列方法来固定几行或者几列的，根据找到ListView的ActualWidth，然后使用一个Converter转换器，想要几列就除以几，就能固定列数。
更改上述的DataTemplate

<DataTemplate x:Key="RightItemTemplate">
                <ItemsControl Height="{Binding ActualHeight,RelativeSource={RelativeSource AncestorType={x:Type ListView}},Converter={StaticResource ListViewHeightConverter}}" Template="{Binding ChipControlStatus, Converter={StaticResource ChipChange}}" Cursor="Hand" MouseLeftButtonDown="btnSPChip_PreviewMouseLeftButtonDown">
                    <ItemsControl.Visibility>
                        <MultiBinding Converter="{StaticResource RightVisibility}">
                            <Binding Path="ChipPosition" />
                            <Binding Path="IsDroplet" />
                        </MultiBinding>
                    </ItemsControl.Visibility>
                    <ItemsControl.Width>
                        <MultiBinding Converter="{StaticResource ListViewWidthConverter}">
                            <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType={x:Type ListView}}" />
                            <Binding Path="IsDroplet"/>
                        </MultiBinding>
                    </ItemsControl.Width>
                </ItemsControl>
            </DataTemplate>

定义两个转换器，一个是宽度，一个是高度

/// <summary>
/// A情况则显示3列除以3,B情况则显示4列除以4
/// </summary>
public class ListViewWidthConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        double i = System.Convert.ToDouble(values[0]);
        bool flag = System.Convert.ToBoolean(values[1]);
        return flag ? i / 4 - 1 : i / 3 - 1;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

public class ListViewHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return System.Convert.ToInt32(value) / 4 - 1;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}