Squaring ListView элементов с использованием DataTemplate

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

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

Answer 2

Я предполагаю, что ваш класс модель называется AppPage и это выглядит как этот

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

единственная ошибка, которую я могу увидеть в вашем Xaml путь вы указываете тип данных, это то, как это должно быть:

DataType = «{х: Тип yourNameSpace: AppPage}»

, но это не повлияет на результат, ваш код работает, и вы можете убедиться в том, что путем установки нет в квадрате содержание:

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

Результат: