1. 首頁
  2. 問答
  3. 列在UWP DataTemplate不拉伸

列在UWP DataTemplate不拉伸

2016-04-14 40 views
2

我正在寫一個UWP應用程序來跟蹤觀看/購買/流等電視節目和 是絕對瘋狂試圖獲取DataTempate中的網格列來擴展它們的寬度，因爲它似乎有一個XAML中的錯誤忽略了* width定義。我需要ListView中的第一列（顯示標題）佔用剩餘的空間（因此列定義=「*」），雖然它會在HeaderTemplate中這樣做，但它絕對拒絕在DataTemplate中這樣做，所以整個由於標題列僅使用每行所需的空間，因此網格最終會變得不可靠和不協調。列在UWP DataTemplate不拉伸

我的XAML低於 - 在ItemTemplate DataTemplate中的模板，我結合稱爲TVShow一個對象，它是可觀察集合在我的主視圖模型的實例。 （我沒有在這裏包含ViewModel或TVShow類的定義，因爲我知道這是純粹的XAML問題）。

到目前爲止唯一有效的工作是在我的TVShow類中存儲一個額外的屬性，該屬性存儲列的正確寬度（通過從網格大小減去其他三列的寬度（在後面的視圖代碼中獲取）但這會導致整個列表重新格式化後，初步顯示哪些看起來醜陋，更不用說可怕的編程

所以我正在尋找如何解決這個問題的想法 - 我可以移動屬性的正確列寬主視圖模型，但我怎麼綁定到模板中的，因爲我綁定到「TVShow」？或者我必須從DataTemplate中取出內容並放入UserControl？我浪費了太多時間在某些事情上是如此荒謬的簡單 - 這個bug似乎已經出現了因此WPF爲什麼沒有MS修復這個 - 非常令人沮喪。

<HubSection Name="hsShows" Width="{Binding HubSectionWidth}" MinWidth="430" MaxWidth="640" 
      VerticalAlignment="Top" HorizontalAlignment="Stretch" Background="{StaticResource Dark}" > 

    <HubSection.Header> 
     <TextBlock Text="Shows" TextLineBounds="TrimToBaseline" OpticalMarginAlignment="TrimSideBearings" 
            FontSize="24" Foreground="{StaticResource Light}"/> 
    </HubSection.Header> 

    <DataTemplate x:DataType="local:MainPage"> 

     <ListView Name="lvwShows" 
            Width="{Binding HubSectionGridWidth}" 
            Grid.Row="0" 
            Foreground="{StaticResource Light}" 
            Background="{StaticResource Dark}" 
            Margin="-14,20,0,0" 
            Loaded="lvwShows_Loaded" 
            ItemsSource="{Binding AllShows}"        
            HorizontalAlignment="Stretch" 
            HorizontalContentAlignment="Stretch" 
            IsSwipeEnabled="True" 
            IsItemClickEnabled="True" 
            SelectedItem="{Binding SelectedTVShow, Mode=TwoWay}"         
            SelectionMode="Single"        
            ScrollViewer.VerticalScrollMode="Enabled" 
            ScrollViewer.VerticalScrollBarVisibility="Auto"> 

      <ListView.ItemContainerStyle> 
       <Style TargetType="ListViewItem"> 
        <Setter Property="HorizontalAlignment" Value="Stretch" /> 
       </Style> 
      </ListView.ItemContainerStyle> 

      <ListView.HeaderTemplate> 
       <DataTemplate> 
        <Grid Width="{Binding HubSectionGridWidth}" Height="Auto" Background="DarkGreen" Margin="15,5,5,5" HorizontalAlignment="Stretch"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="80"/> 
          <ColumnDefinition Width="100"/> 
          <ColumnDefinition Width="80"/> 
         </Grid.ColumnDefinitions> 

         <TextBlock Grid.Column="0" Text="Title" FontSize="16" FontWeight="Bold" Foreground="{StaticResource Bright}" 
                VerticalAlignment="Bottom" HorizontalAlignment="Left" 
                Tag="TITLE,ASC" Tapped="ShowsGridHeading_Tapped"/> 

         <TextBlock Grid.Column="1" Text="Seasons" FontSize="16" FontWeight="Bold" Foreground="{StaticResource Bright}" 
                VerticalAlignment="Bottom" HorizontalAlignment="Center" 
                Tag="SEASONS,ASC" Tapped="ShowsGridHeading_Tapped"/> 

         <TextBlock Grid.Column="2" Text="Last Watched" FontSize="16" FontWeight="Bold" Foreground="{StaticResource Bright}" 
                VerticalAlignment="Bottom" HorizontalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" 
                Tag="WATCHED,ASC" Tapped="ShowsGridHeading_Tapped"/> 

         <TextBlock Grid.Column="3" Text="Last Episode" FontSize="16" FontWeight="Bold" Foreground="{StaticResource Bright}" 
                VerticalAlignment="Bottom" HorizontalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" 
                Tag="EPISODE,ASC" Tapped="ShowsGridHeading_Tapped"/> 
        </Grid> 
       </DataTemplate> 
      </ListView.HeaderTemplate> 

      <ListView.ItemTemplate> 
       <DataTemplate x:DataType="model:TVShow"> 
        <Grid Height="Auto" MinWidth="410" MaxWidth="640" Background="Blue" HorizontalAlignment="Stretch" RightTapped="ShowsList_RightTapped"> 

         <FlyoutBase.AttachedFlyout> 
          <MenuFlyout Placement="Bottom"> 
           <MenuFlyoutItem x:Name="UpdateButton" Text="Update from TVMaze" Click="FlyoutUpdateButton_Click"/> 
           <MenuFlyoutItem x:Name="RefreshButton" Text="Refresh" Click="FlyoutRefreshButton_Click"/> 
           <MenuFlyoutItem x:Name="DeleteButton" Text="Delete Show" Click="FlyoutDeleteButton_Click"/> 
          </MenuFlyout> 
         </FlyoutBase.AttachedFlyout> 

         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="80"/> 
          <ColumnDefinition Width="100"/> 
          <ColumnDefinition Width="80"/> 
         </Grid.ColumnDefinitions> 

         <TextBlock Grid.Row="0" Grid.Column="0" Text="{x:Bind Title}" Foreground="{StaticResource Light}" 
                VerticalAlignment="Center" HorizontalAlignment="Stretch" TextWrapping="Wrap" /> 

         <TextBlock Grid.Row="0" Grid.Column="1" Text="{x:Bind Seasons}" Foreground="{StaticResource Light}" 
                VerticalAlignment="Center" HorizontalAlignment="Center"/> 

         <TextBlock Grid.Row="0" Grid.Column="2" Foreground="{StaticResource Light}" 
                Text="{x:Bind LastWatchedDate, Mode=OneWay, Converter={StaticResource DateTimeFormatConverter}, ConverterParameter='{}{0:dd/MM/yyy HH\\\\:mm}'}"        
                VerticalAlignment="Center" HorizontalAlignment="Center"/> 

         <TextBlock Grid.Row="0" Grid.Column="3" Text="{Binding LastWatchedEpisodeRef}" Foreground="{StaticResource Light}" 
                VerticalAlignment="Center" HorizontalAlignment="Center"/> 
        </Grid> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
     </ListView> 
    </DataTemplate> 
</HubSection>

來源

2016-04-14 nzmike

回答

1

如果您在視圖模型有正確的寬度可以綁定像這樣

Width={Binding ElementName = ListViewname,Path=DataContext.width}

來源

2016-04-15 03:11:33 Archana

+0

感謝您 - 已經嘗試過這種方式，但沒有正確的語法，所以不能得到它的工作。我最終完成了我在答案中的內容，但我已經提出了這個建議，因爲它仍然非常有用。 – nzmike

1

此問題是由ListViewItem的默認模板引起的，使項目內的Grid舒展，你可以打開文檔提綱 label =>找到你的ListView控件並右鍵點擊它，然後選擇編輯附加模板 =>選擇編輯生成物品容器（ItemCo ntainerStyle），最後編輯副本。

enter image description here

這時你會發現在你的頁面資源此模板，請更改代碼：

<Setter Property="HorizontalContentAlignment" Value="Left" />

要：

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

然後您就可以解決問題。

我看到你已經不止一個ListView，如果您希望此型靶所有ListView在這個頁面，你可以刪除這個模板的x:Key屬性，並與由行動所產生的靜態資源刪除ItemContainerStyle上。

不要沮喪，我覺得你以前開發WPF，很容易學習UWP。編輯模板或控件的樣式可以解決許多佈局問題，下面是一些default templates and styles of different controls，下次您有這樣的問題時可以看看。

如果您對如何開發UWP應用程序有疑問，可以參考Develop UWP apps，如果您在使用API​​方面遇到問題，可以參考Reference for Universal Windows apps。

如果您需要幫助或建議，您可以在此提問，這裏的人很樂意提供幫助。

來源

2016-04-15 04:39:06

+0

感謝恩典 - 這是我所做的，但不像進入Blend那樣複雜（你需要火箭科學學位才能使用），請參閱我的答案。 – nzmike

3

好的，所以我最終將這個XAML添加到了我的ListViews中（儘管我知道我可以完成Grace的建議，但是我發現Blend可怕） - 這是Horizo​​ntalContentAlignment實際上做的竅門！

<ListView.ItemContainerStyle> 
    <Style TargetType="ListViewItem"> 
     <Setter Property="HorizontalAlignment" Value="Stretch" /> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
    </Style> 
</ListView.ItemContainerStyle>

來源

2016-04-15 22:46:55 nzmike

+1

是的，我建議修改這個'Horizo​​ntalContentAligment'屬性的值。 –

相關問題

 相關問題