動態列表視圖調整大小

我想動態調整列表視圖/項目的寬度。因此，當用戶更改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

動態列表視圖調整大小

回答

相關問題