Can you resize grid items dynamically?
I have a gridview that has a textbox in it. They textbox has a number of bound values that can cause it to grow in size but it does not do so after the app is running.
<Slider x:Name="FontSizeSlider" Minimum="10" Maximum="120" />
<GridView ItemsSource="{Binding MyList}" >
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Height="{Binding ElementName=FontSizeSlider, Path=Value}"
Width="{Binding ElementName=FontSizeSlider, Path=Value}"
Text="{Binding}"
FontSize="{Binding ElementName=FontSizeSlider, Path=Value}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I realise that the items would have to shuffle around too so that then can fit in the columns. I don't think this is supported in gridview is it?
Is this possible?
Fixed it by adding:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Related
In my Windows 8.1/Windows Phone 8.1 App, I have a GridView and I want to change my VisualState after an item is selected. I can do this easy with behavior like this :
<GridView IsItemClickEnabled="True" ItemsSource="{Binding Collections}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="SelectionChanged">
<Core:GoToStateAction StateName="NextVisualState"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<GridView.ItemTemplate>
<DataTemplate >
<Grid Width="80" Height="80">
<TextBlock Text="{Binding ItemName}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MinWidth="150"></ItemsWrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
The problem occur when my item is already selected (The user can be on this VisualState with the Item already selected by binding or something), I want the SelectionChanged event to be fired if the user click on an item that already selected (so he can go to the next VisualState).
I try to change the VisualState on the ItemClick event but the event is fired before the item is selected so it's not working.
<GridView ItemsSource="{Binding Collections}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}" x:Name="MyGridView">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="80" Height="80" Background="Transparent">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Core:InvokeCommandAction Command="{Binding DataContext.ChangeStateCommand, ElementName=MyGridView}" CommandParameter="NextState"></Core:InvokeCommandAction>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<TextBlock Text="{Binding ItemName}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MinWidth="150"></ItemsWrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
I had to set a background in the Grid Datatemplate to make the whole Grid clickable I don't know why.
Select your Gridview control
Change selected Index property from 0 to -1
I'm not sure whether it works or not, but you can try.
I am developing an application and I have an image control that displays however many images are stored in the database. So I have got the images to display. However the images are displaying below the previous one and not next to the previous one.
(ignore the names next to the picture I have taken them out now).
So my question is what method can I use to get them aligned, I'm not sure what I need to search for in Google, everything I can think of doesnt bring back anything close to what I am looking for. The XAML code is below:
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot Title="Share This!">
<!--Pivot item one-->
<phone:PivotItem Header="All Photos">
<Grid>
<ListBox Height="559" HorizontalAlignment="Left" Margin="6,20,0,0" x:Name="lst_viewPhotos" VerticalAlignment="Top" Width="444" FontSize="30" ItemsSource="{Binding}" SelectionChanged="lst_viewPhotos_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0" >
<Image Source="{Binding}" HorizontalAlignment="Left" Height="100" Width="100"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</phone:PivotItem>
</phone:Pivot>
</Grid>
You can get them displaying alongside each other by setting the ItemsPanel
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
However I would recommend a GridView for this so that you can use a Wrapgrid which will reach the end of a Row or Column and wrap to a new Row or Column.
Something like this
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
I'm building a universal app and my Win8.1 app has to show a grid of items. Normally the grid consists of 3 columns, but on smaller screens I want the items to wrap so that there are only 2 columns (or even 1). This is my code:
<GridView ItemsSource="{Binding Regions}" IsItemClickEnabled="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" MinWidth="400" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="10">
<Image Source="{Binding Code, Converter={StaticResource FlagIconConverter}, ConverterParameter='/Assets/Icons/Flags/{0}.png'}" Width="30" />
<TextBlock Text="{Binding NativeName}" Style="{StaticResource BodyTextBlockStyle}" Margin="10,0,0,10" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Whenever I make the app smaller, the items do not automatically wrap. I tried solving this by changing the MaximumRowsOrColumns property with a VisualStateManager but that didn't work because it couldn't access my WrapGrid for some reason. Changing the property from code-behind didn't work either, because again it couldn't access the WrapGrid.
I tried this with both WrapGrid and ItemsWrapGrid (what is the difference anyway?) and ListView and GridView. No difference there.
Does anyone know how to accomplish this?
You shouldn't need to do anything. It should wrap based on the available client area. The only thing I can think of that would not make it wrap is that you put your <GridView> inside a fixed width container or a container that is size Auto in which you don't update the Observable Collection to notify the Grid to redraw/update itself.
For example this will not wrap.
<Grid Width="1000">
<GridView x:Name="myGridView" IsItemClickEnabled="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="5"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<!-- DATATEMPLATE -->
</GridView.ItemTemplate>
</GridView>
</Grid>
However get rid of that Width=1000 and it will wrap.
Example output 3 different sizes
I have a GridView containing VariableSizedWrapGrid, like this...
<local:MyGridview
Padding="116,0,0,0"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.Column="1"
Grid.Row="1"
SelectionMode="None"
ItemTemplateSelector="{StaticResource templateSelector}"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
IsItemClickEnabled="True"
ItemClick="itemGridView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Margin="0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Key}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" ItemWidth="1" ItemHeight="1" Margin="0,3,40,0" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</local:MyGridview>
Which displays items like this...
I want to make it stack items horizontally rather than vertically so that the orange tile sits next to the blue one rather than below it
I've tried changing the Orientation of the VariableSizedWrapGrid to Horizontal but this happens....
Am I doing something really silly?
Why did you set ItemWidth and ItemHeight to 1? Do you set proper ColumnSpan and RowSpan values from code? I suggest you to set ItemWidth and ItemHeight to something more big, maybe to the size of the smallest item. VariableSizedWrapGrid layout algorithm is not perfect, in my samples sometimes it places small items horizontally as you want and sometimes - not (I don't set VariableSizedWrapGrid Orientation at all).
I've got a grouped GridView with some explicitly sized databound controls inside it.
The GridView has a VariableSizedWrapGrid as the ItemPanelTemplate type.
As you can see the ScrollView scrolls well beyond the content.
Any help appreciated, XAML below.
<GridView Grid.Row="2" ItemsSource="{Binding Source={StaticResource contentSetListViewSource}}" ItemTemplate="{StaticResource DashboardContentSetItem}" SelectedIndex="-1" SelectionMode="Multiple" Padding="0,0,0,15" VerticalAlignment="Center" Margin="20 0" HorizontalAlignment="Left">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}" Margin="0 10" Style="{StaticResource GroupHeaderTextStyle}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
GridView by default uses an ItemsPanelTemplate consisting of a Border containing a WrapGrid.
So I was targeting the wrong panel, this is the fix I used:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
The reason being that a WrapGrid isn't variable sized it's fixed to the size of the largest collection, the size of the second grouping (1 item) was the same as the first (5 items) which is why it extended beyond the content.