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

时间:2019-03-19 14:50:31

标签: c# xaml uwp uwp-xaml

I have this listview and I want to dynamically resize the item's properties (fontsize, width and height etc..) upon a window's size change. So far I've been able to do so by modifying item source's elements' layout one by one in c# (with a for loop). As the listview items' count grows, the effect becomes glitchy later on. I wonder if there is a way to uniformly modify the style of these templated items in listview. I've tried using and modifying a staticResource style that is applied to the template but to no avail.

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

2 个答案:

答案 0 :(得分:2)

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

我认为最好的方法是在ListViewItem上为FontSizeListView(以及其他属性)设置一个绑定。这是如何设置此绑定的示例

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);
    }
}

答案 1 :(得分:0)

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

此视频向您展示了方法。

Bob Tabor explaining how to utilize User Controls as Data Templates