如何使用复合 UI 元素填充 ListView？

Question

我有一个这样的 ListView:

 <ListView  x:Name="Thumbnails" HorizontalContentAlignment ="Center" VerticalContentAlignment="Top" Padding="0"  Background ="#81AFD3" Grid.Row="6" Grid.Column="6" Grid.ColumnSpan="10" Grid.RowSpan="27" ScrollViewer.VerticalScrollBarVisibility="Visible">      
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="IsSelected" Value="True"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

现在，我想用 5 个元素填充它。每个元素都是一个 Grid，其中包含一个图像和两个按钮。所以我在 UserControl.Resources 中这样定义了这个网格：

</UserControl.Resources>
    <Grid x:Key="ThumbnailElement">

        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <Image Name="thumbImage" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="14" Grid.RowSpan="7" Source="/Assets/ImportAssets/Test.jpg"></Image>

        <Button Name="slide_ON_OFF" Grid.Row="0" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4">
            <Button.Template>
                <ControlTemplate>
                        <Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
                        <Image Source="/MS_Show_Assets/ImportAssets/Visible_ON.png"/>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
        </Button>

        <Button Name="fadein_ON_OFF" Grid.Row="3" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4">
            <Button.Template>
                <ControlTemplate>
                    <Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
                        <Image x:Name ="main_image" Source="/MS_Show_Assets/ImportAssets/Bulletpoint_ON.png"/>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>

    </Grid>
</UserControl.Resources>

我该怎么做，并且只在 XAML 中，而不使用隐藏代码？

Answer 1

使用 ContentControl 交换您的观点。示例：

<UserControl  xmlns:Views="....View">
    <UserControl.Resources>
        <ControlTemplate x:Key="DefultTemplate">
            <Views:DefultView/>
        </ControlTemplate>
    </UserControl.Resources>

    <ListView  x:Name="Thumbnails" HorizontalContentAlignment ="Center" VerticalContentAlignment="Top" Padding="0"  Background ="#81AFD3" Grid.Row="6" Grid.Column="6" Grid.ColumnSpan="10" Grid.RowSpan="27" ScrollViewer.VerticalScrollBarVisibility="Visible">
        <ListView.ItemContainerStyle>
            <Style TargetType="ContentControl">
                <Setter Property="Template" Value="{StaticResource DefultTemplate}" />
            </Style>
        </ListView.ItemContainerStyle>

        <ListItem Background="Red" Margin="5 5 5 5"/>
        <ListItem Background="Red" Margin="5 5 5 5"/>
        <ListItem Background="Red" Margin="5 5 5 5"/>
        <ListItem Background="Red" Margin="5 5 5 5"/>
        <ListItem Background="Red" Margin="5 5 5 5"/>
        <ListItem Background="Red" Margin="5 5 5 5"/>

    </ListView>
</UserControl>

默认模板：

<UserControl ....>
    <....>
</UserControl>

如果我们现在不知道项目的数量，我们可以使用：

<ListView ItemsSource="{Binding SomeCollection}" x:Name="Thumbnails" HorizontalContentAlignment ="Center" VerticalContentAlignment="Top" Padding="0"  Background ="#81AFD3" Grid.Row="6" Grid.Column="6" Grid.ColumnSpan="10" Grid.RowSpan="27" ScrollViewer.VerticalScrollBarVisibility="Visible">
    <ListView.ItemContainerStyle>
        <Style TargetType="ContentControl">
            <Setter Property="Template" Value="{StaticResource DefultTemplate}" />
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

如何使用复合 UI 元素填充 ListView？

How to populate a ListView with composite UI elements?

c#

wpf

xaml

wpf-controls