动态列表视图调整大小

我想动态调整列表视图/项目的宽度。因此，当用户更改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标题。因此，如果有人有访问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; 
    }

来源

2016-09-15 Olias

我不是100％确定它适合你，但你见过UWP社区工具包吗？ adaptivegridview很容易使用...也许它也涵盖了你的用例：https://developer.microsoft.com/en-us/windows/uwp-community-toolkit/controls/adaptivegridview.htm – gregkalapos

你可以定义什么“的完美大小“的意思？如果通过这你意味着屏幕宽度的一小部分，那么可以通过将ListView放入使用'*'大小的网格列与屏幕宽度成比例的方式来实现。 – ibebbs

@ibebbs你有没有一个例子，因为当我尝试它时，项目不能正确缩放，头部会。 – Olias

所有其他元素，我可以访问和操作的代码隐藏。即使是ListView标题也可以访问。所以如果有人有访问ListView DataTemplate中的值的解决方案，那将是非常好的。

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

作为解决方法，您可以使用数据绑定来更改内部Grid的Width。您可以绑定到Grid.Width到您的视图模型对象的属性（假设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类：

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。

来源

2016-09-16 05:32:29

动态列表视图调整大小

回答

相关问题