Reputation: 1112
I'm working on a UWP Twitter app, and I'm making use of the VisualStateManager to change the layout based on the width of the app window (mostly for tablet and mobile support).
I've read up on this a bit, and it sounds like HorizontalAlignment="Stretch"
is what I need to resize a GridView to the width of the ListViewItem parent that contains it.
However, this isn't happening. Looking in the live XAML view while debugging, my ListView and ListViewItem is taking up the full width of the app window, but the GridView is not. It's sizing based on the content it contains.
Here's my XAML for the page displayed below:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="mobile">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="bladeView.BladeMode" Value="Fullscreen" />
<Setter Target="lstFeed.HorizontalAlignment" Value="Stretch"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="desktop">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="640" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="bladeView.BladeMode" Value="Normal" />
<Setter Target="bldHome.Width" Value="430"/>
<Setter Target="lstFeed.Width" Value="430"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ct:BladeView x:Name="bladeView" BladeClosed="UnloadBlade">
<ct:BladeItem x:Name="bldHome" Tag="blade-00" IsOpen="True" TitleBarVisibility="Collapsed" BorderThickness="0" Style="{StaticResource BladeStyle}" Margin="0 28 0 0">
<ListView x:Name="lstFeed" VerticalAlignment="Top" Padding="0 0 0 0"
SelectionChanged="LoadBlade" ItemTemplate="{StaticResource TweetTemplate}" />
</ct:BladeItem>
</ct:BladeView>
</Grid>
And the relevant XAML from my DataTemplate:
<Style x:Key="BladeStyle" TargetType="ct:BladeItem">
<Setter Property="Width" Value="430"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
<Style x:Key="ListItemStyle" TargetType="Grid">
<Setter Property="Width" Value="400" />
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="MinHeight" Value="50" />
</Style>
<Style x:Key="MetaButtons" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="FontFamily" Value="{StaticResource FontAwesome}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>
<DataTemplate x:Key="TweetTemplate" x:DataType="tweeter:Tweet2">
<Grid Style="{StaticResource ListItemStyle}" Tag="{x:Bind Path=Tweet.Id}" x:Name="grdTweets" HorizontalAlignment="Stretch">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="mobile">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="bladeView.BladeMode" Value="Fullscreen" />
<Setter Target="grdTweets.HorizontalAlignment" Value="Stretch" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="desktop">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="640" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="bladeView.BladeMode" Value="Normal" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
Edit
So I just found the HorizontalContentAlignment
attribute of ListViewItem
, but since my ListViewItems are being created dynamically when I set the ItemsSource of my ListView, I'm not sure how to set this property.
Where can I set this?
Screenshot of what's happening:
Upvotes: 2
Views: 381
Reputation: 4455
The best way is to create an ObservableCollection<T>
and bind it to the itemsource of the ListView, this way you will create only the T type items dynamically and keep adding them to your collection and all the data template and styling of listview and its listview items can be controlled by xaml.
The main thing to point out here is that do not created listviewItems from c# because that can make its styling hard to maintain.
Upvotes: 0
Reputation: 1112
I figured out that I can use a style setter on ListViewItem
itself.
I added this to the styles above my DataTemplate
and it worked.
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
Upvotes: 2
Reputation: 140
You can always set Max width for Grid , so that you can fit in the Grid view
Upvotes: 0