使用DataTemplate平移ListView项

Question

我正在尝试在我的项目中设置ListView样式，我希望它的项目是平方的。
根据我在网上找到的答案，以下是我目前的状态。

我的ListView：

<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled"
              ScrollViewer.VerticalScrollBarVisibility="Hidden" Grid.Row="1"
              Background="Transparent" ItemsSource="{Binding RibbonItemList}" ItemTemplate="{StaticResource RibbonPagesListItemTemplate}" />

这是我尝试平衡ListView s ItemTemplate：

<DataTemplate x:Key="RibbonPagesListItemTemplate" DataType="x:Type AppPage">
    <Grid Width="Auto" Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}">
        <Image Height="25" Width="25" Source="{Binding Path=ImgSrc}" />
    </Grid>
</DataTemplate>

但是，上面的不工作，我找不到解释或合适的解决方案。
我怎么能做这个工作？

Answer 1

我假设您的模型类名为AppPage，它看起来像这样

public class AppPage
{
    //Other props
    public Uri ImgSrc { get; set; }      
}

我在你的Xaml中看到的唯一错误就是你指定DataType的方式，它应该是这样的：

DataType =＆＃34; {x：输入yourNameSpace：AppPage}＆＃34;

但这不会影响结果，您的代码可以正常工作，您可以通过设置无方形内容来验证：

 <Window.Resources>
    <DataTemplate x:Key="RibbonPagesListItemTemplate" DataType="{x:Type yourNameSpace:AppPage}">
        <Grid   Background="White" Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}">
            <Image Height="25" Width="70" Source="{Binding Path=ImgSrc}" />
        </Grid>
    </DataTemplate>
</Window.Resources>

<Grid Background="Black">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden" 
          Background="Transparent" ItemsSource="{Binding RibbonItemList}" ItemTemplate="{StaticResource RibbonPagesListItemTemplate}" >           
    </ListView>
</Grid>

结果：

Answer 2

如果您希望整个项目容器（即在悬停或选择时突出显示的元素）是方形的，而不是尝试使用ItemTemplate来完成它，该ItemContainerStyle用于定义内部项目的外观容器，您应该使用<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" Background="Transparent" ItemsSource="{Binding RibbonItemList}" ItemTemplate="{StaticResource RibbonPagesListItemTemplate}"> <ListView.ItemContainerStyle> <Style TargetType="{x:Type ListViewItem}"> <Setter Property="Width" Value="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" /> </Style> </ListView.ItemContainerStyle> </ListView> 属性设置项容器本身的样式：

Grid

然后，您可以从商品模板中删除RewriteRule ^([^\.]+)$ $1.php [NC,L] 。