uwp 如何一次调整模板项目源中项目的大小？

Question

我有这个列表视图，我想根据 window 的大小变化动态调整项目的属性（字体大小、宽度和高度等）。到目前为止，我已经能够通过在 c# 中一个一个地修改项目源的元素布局（使用 for 循环）来做到这一点。随着列表视图项目数量的增加，效果稍后会出现故障。不知道有没有办法统一修改listview中这些模板化项的样式。我试过使用和修改应用于模板的 staticResource 样式，但无济于事。

 <ListView
        x:Name="leftMenubar"
        Grid.Column="0"
        Height="auto"
        VerticalAlignment="Top"
        VerticalContentAlignment="Stretch"
        IsItemClickEnabled="True"
        ItemClick="LeftBarMenuItemClicked"
        ItemsSource="{x:Bind Items}"
        Loaded="LeftMenubar_Loaded">
        <ListView.Resources>
            <SolidColorBrush x:Key="ListViewItemBackgroundPointerOver" Color="Transparent" />
            <SolidColorBrush x:Key="ListViewItemBackgroundPressed" Color="Transparent" />
            <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPressed" Color="Transparent" />
            <SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="Transparent" />
            <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="Transparent" />
        </ListView.Resources>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>

        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsStackPanel
                    Margin="0"
                    VerticalAlignment="Top"
                    GroupPadding="0"
                    Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:LeftMenuBarItem">
                <StackPanel Margin="0,0,0,0" Padding="{x:Bind Pad, Mode=OneWay}">
                    <BitmapIcon
                        Height="{x:Bind IconHeight, Mode=OneWay}"
                        MinHeight="20"
                        Margin="0,0,0,0"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Stretch"
                        Foreground="{x:Bind Foreground, Mode=OneWay}"
                        UriSource="{x:Bind ImgPath}" />
                    <TextBlock
                        Width="Auto"
                        Margin="0,5,0,0"
                        HorizontalAlignment="Center"
                        FontSize="10"
                        Foreground="{x:Bind Foreground, Mode=OneWay}"
                        Text="{x:Bind Title}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Answer 1

您可以通过几种不同的方式完成此操作。您可以设置数据模板以将字体大小绑定到控件的高度并在那里计算。但是随后您会为列表中的每个项目触发一个转换器。

我认为最好的方法是为 ListViewItem 设置一个绑定到 ListView 上的 FontSize（和其他属性）这是一个如何设置的示例这个起来

class AdjustableListView : ListView
{
    public AdjustableListView()
    {
        SizeChanged += OnSizeChanged;
    }

    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);

        var listItem = (ListViewItem)element;
        var binding = new Binding { Source = this, Path = new PropertyPath("FontSize")};
        listItem.SetBinding(ListViewItem.FontSizeProperty, binding);
    }

    private void OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        FontSize = Math.Max(12, e.NewSize.Height / 24);
    }
}

Answer 2

用户控件允许您封装您打算经常使用的 XAML 的常见段落，无论是在单个页面上还是在整个应用程序中。但是，当您想在采用自适应布局时更改 GridView 或 ListView 的数据模板大小时，用户控件最有用，我认为这是完成任务的最佳方法。

此视频向您展示了操作方法。

Bob Tabor explaining how to utilize User Controls as Data Templates

uwp 如何一次调整模板项目源中项目的大小？

uwp how to resize items in a templated item source all at once?

c#

xaml

uwp

uwp-xaml