动态列表视图调整大小

Question

我想动态调整我的列表的宽度View/Items。所以当用户改变App的屏幕尺寸时，Listview会自动调整到完美尺寸。目前我正在使用 adaptiv 触发器，但我必须为我想要支持的每个可能的大小专门定义值。

<VisualStateManager.VisualStateGroups>
 <VisualStateGroup>
  <VisualState>
   <VisualState.StateTriggers>
    <AdaptiveTrigger MinWindowWidth="1000"></AdaptiveTrigger>
   </VisualState.StateTriggers>
   <VisualState.Setters>
     <Setter Target="textBlockOne.(RelativePanel.Width)" Value="130" />
   </VisualState.Setters>

我可以在代码隐藏中访问和操作的所有其他元素。甚至 ListView Header 也是可访问的。因此，如果有人有访问 ListView DataTemplate 中的值的解决方案，那就太好了。

像这样的东西会很棒：

<ListView x:Name="testList">
 <ListView.Header>
  <StackPanel x:Name="TestListHeaderStackPanel">
 </ListView.Header>
 <ListView.ItemTemplate>
  <DataTemplate x:Name="DataTemplatedata">
   <Grid x:Name="GridTest">
    .....
   </Grid>
  </DataTemplate>
 <ListView.ItemTemplate>
<ListView>

    private void OnPageSizeChanged(object sender, SizeChangedEventArgs args)
    {
     GridTest.ColumnDefinitions[1].Width=20;
    }

Answer 1

Every other element i can access and manipulate in the codebehind. Even the ListView Header is accessible. So it would be very nice if someone has a solution for accessing the values in the ListView DataTemplate.

可以读取DataTemplate 的值，但是根据DataTemplate 值更改已呈现的ListView 的值将是一个问题。而且不建议这样做。

作为解决方法，您可以使用数据绑定来更改内部 Grid 的 Width。您可以将 Grid.Width 绑定到 ViewModel 对象的属性（比方说 GridWidth）：

<StackPanel VerticalAlignment="Center">
        <ListView Name="lvImgs">
            <ListView.ItemTemplate>
                <DataTemplate>
                        <Grid Width="{Binding GridWidth}">
                            <Image  Source="{Binding ImageSource}"/>
                        </Grid>
                    </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Name="btnChange" Click="btnChange_Click">Click Me to change Item Size</Button>
</StackPanel>

并更改 CoreWindow.SizeChanged 事件中的 GridWidth：

Window.Current.CoreWindow.SizeChanged += CoreWindow_SizeChanged;
private void CoreWindow_SizeChanged(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.WindowSizeChangedEventArgs args)
{
    var widnowWidth = args.Size.Width;
    foreach (Model item in lvImgs.Items)
    {
        item.GridWidth = 500;
    }
}

这里是 Model class:

public class Model:INotifyPropertyChanged
{
    public Uri ImageSource{get;set;}
    public double _gridWidth;
    public double GridWidth
    {
        get { return _gridWidth; }
        set {
            _gridWidth = value;
            RaisePropertyChanged();
        }
    }

    public void RaisePropertyChanged([CallerMemberName]string name="")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }

    }
    public event PropertyChangedEventHandler PropertyChanged;
}

这是完整的演示：DynamicListViewSample。

动态列表视图调整大小

Dynamic Listview Resizing

c#

uwp

uwp-xaml