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>

DefultTemplate：

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

1 个答案: