I use a wrapgrid as the itemspaneltemplate in my app
<GridView x:Name="InfoGridView" Margin="50">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" ItemWidth="200" ItemHeight="50" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<TextBlock Text="Name" Style="{StaticResource AppNameTextStyle}" />
<TextBox x:Name="NameTextBox" Width="180"/>
<Button x:Name="AnotherNameButton" Style="{StaticResource AddAppBarButtonStyle}"/>
</GridView>
The TextBlock, TextBox and the Button are display in the middle of the item, how to let them display keep left?
Set this up on the ItemContainerStyle within your GridView by adding the following XAML below your ItemsPanel entry.
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left" />
</Style>
</GridView.ItemContainerStyle>
Related
I currently have the following XAML for a ListView, and I want the individual panels to scroll vertically and independently of each other.
Currently, when I use the scrolling function in the stack panel, panel 1, 2 and 3 all scroll vertically together. Importantly, I do not know how many panels there will be, sometimes there will be one, and on another day there could be six.
I would like for the panels to scroll vertically and independently of the other panels.
The thing I am struggling to achieve is to make the <ListView.ItemsPanel> dynamic enough to create individual stack panels, based on the groups in the data. I assume this will make the <GroupStyle.Panel> work independently.
I thought that the <ItemsPanelTemplate> would treat them as individuals and not as a whole group.
The XAML I currently have is as follows:
<ListView Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"
ItemsSource="{Binding Source={StaticResource SomeData Mode=OneWay}"
ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Enabled">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Width="150">
<TextBlock Text="{Binding Title, TargetNullValue='No Data'}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<StackPanel ScrollViewer.VerticalScrollMode="Enabled" Orientation="Vertical" Spacing="4"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Background" Value="Gray" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="4" />
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
I have made an ListView ItemTemplate and I want it to be responsive (when orientation changes, for example, the listView item changes in size). I am using a Grid as a control for the inner elements of the grid but it is not behaving. The ListView.ItemContainerStyle has property HorizontalAlignment="Stretch" which is the behaviour I want, and the ItemContainerStyle is the correct width. Inside the Border and Grid I have the same HorizontalAlignment="Stretch" and they are overflowing when the TextBox contained inside has lots of text, and when there is little or no text in the TextBox the Border element shrinks to be smaller than the ItemContainerStyle is showing.
<ListView ItemsSource="{Binding TileStories}" x:Name="cont" Margin="0,10,0,10" Background="{StaticResource CustomResourceBrush}" BorderBrush="{StaticResource CustomResourceBrush}" Foreground="{StaticResource CustomResourceBrush}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="20,10,20,10" />
<Setter Property="Foreground" Value="{StaticResource BTVioletBrush}" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border CornerRadius="20" BorderThickness="0" Width="{Binding ScrollViewerWidth}" Background="White" HorizontalAlignment="Stretch">
<StackPanel Height="160" Orientation="Horizontal">
<Grid Background="black">
<TextBox Text="Example">
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Just do this
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
Define MinHeight as 0 for ItemContainerStyle
Add to your ItemContainerStyle
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
And I think Width="{Binding ScrollViewerWidth}" is not required. You can remove this.
I didn't exactly find a solution but I did find a workaround. The Grid was being bound with Width="0" if I used {Binding ActualWidth, ElementName=StackPanel, Mode=OneWay} where StackPanel was the panel within the data template. I was poking around the designer in VS2013 and figured out that the Width was 0 because (I am assuming) the items in the data template are drawn one by one and therefore the Width was zero when the first template was drawn and so on and so forth. I haven't explained that very well I guess, but the important thing is the solution:
<PivotItem x:Name="Feed">
....
<Border CornerRadius="20" BorderThickness="0" Background="White" HorizontalAlignment="Stretch">
<StackPanel Height="160" Orientation="Horizontal">
<Grid HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Feed, Mode=OneWay}">
........
</Grid>
</StackPanel>
</Border>
...
</PivotItem>
I think that the PivotItem having a non-variable Width meant the Grid had a concrete Width to inherit from.
enter image description hereI have ListBoox
<ListBox>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Green" >
<TextBlock Text="{Binding}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Yellow"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
I need the items of the ListBox to be stretched across the entire screen (list). It works perfectly if the StackPanel's orientation is vertical but in my case the orientation is horizontal and it doesn't work at all. Any ideas, suggestions - I need help
You can use
HorizontalAlignment="Stretch"
to stretch XAML containers like StackPanels over the entire space.
I have an application that it's main page is organized like this:
Grid (LayoutRoot)
VisualStateManager (FullLandscape, FullPortrait, Filled, Snap)
Grid (Back button and page title)
ScrollViewer (FullLandscape View )
StackPanel (Horizontal)
GridView (non grouped GridView)
GridView (grouped GridView)
GridView (non grouped GridView)
GridView (grouped GridView)
GridView (grouped GridView)
ScrollViewer (Snap View)
Grid
ListView (Vertical)
My questions are:
Do I have to provide a SemanticZoom for each page in my application in order for the application to pass certification?
If I want to provide a SemanticZoom for this main page, how do I do it? i.e. where do I insert the SemanticZoom control?
( I read the article: Quickstart: Adding SemanticZoom controls:)
<SemanticZoom.ZoomedOutView>
<!-- Put the GridView for the zoomed out view here. -->
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<!-- Put the GridView for the zoomed in view here. -->
</SemanticZoom.ZoomedInView>
Thanks,
EitanB
It's a bit hard from to understand what you are trying to achieve from what you have written above, but I'll do my best to answer you questions.
1) SemanticZoom usage is not mandatory to pass certification. It's a nice feature that helps you present data in a neat way to the user and when used appropriately is pretty darn cool.
But, it's just a control. Give us some more information about your project and maybe we can help you decide if it will add something extra or not to the application.
Start easy and work into the details later.
2) Download the SemanticZoom example from MSDN and have a look at the code. BAsically it looks like this:
<Page.Resources>
<CollectionViewSource x:Name="cvs2" IsSourceGrouped="true" />
</Page.Resources>
<Grid x:Name="ContentPanel" VerticalAlignment="Top" HorizontalAlignment="Left">
<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
<GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Group.Key}"
FontFamily="Segoe UI Light"
FontSize="24"/>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid ItemWidth="75" ItemHeight="75" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView ItemsSource="{Binding Source={StaticResource cvs2}}" IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="10,10,0,0" HorizontalAlignment="Left" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Image Source="{Binding Image}" Height="60" Width="60" VerticalAlignment="Center" Margin="0,0,10,0"/>
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" Width="200" VerticalAlignment="Center" Text="{Binding Title}" HorizontalAlignment="Left" FontFamily="Segoe UI" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" Margin="5" FontSize="18" FontFamily="Segoe UI Light" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<StackPanel Orientation="Vertical">
<ContentPresenter Content="{TemplateBinding Content}" />
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" MaximumRowsOrColumns="1" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<Button Visibility="Collapsed"/>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
</Grid>
and codebehind:
StoreData _storeData = null;
public ScenarioOutput1()
{
InitializeComponent();
_storeData = new StoreData();
List<GroupInfoList<object>> dataCategory = _storeData.GetGroupsByCategory();
cvs1.Source = dataCategory;
}
Thanks for your answer.
I did see the example and it is clear to me. What is not clear to me is: I have on this one page multiple GridViews not just one like in the example. The question that is open in my mind is: Should I follow the example code for each of the GridViews on the page, or is there a way to do it once for the page that will cover all GridViews? Please see the pseudo code below.
Thanks,
EitanB
VisualStateManager (FullLandscape, FullPortrait, Filled, Snap)
Grid (Back button and page title)
ScrollViewer (FullLandscape View )
StackPanel (Horizontal)
<SemanticZoom x:Name="semanticZoom1" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
GridView (non grouped GridView)
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
GridView (non grouped GridView - Semantic Version)
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<SemanticZoom x:Name="semanticZoom2" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
GridView (grouped GridView)
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
GridView (grouped GridView - Semantic Version)
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<SemanticZoom x:Name="semanticZoom3" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
GridView (non grouped GridView)
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
GridView (non grouped GridView - Semantic Version)
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<SemanticZoom x:Name="semanticZoom4" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
GridView (grouped GridView)
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
GridView (grouped GridView - Semantic Version)
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<SemanticZoom x:Name="semanticZoom5" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
GridView (grouped GridView)
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
GridView (grouped GridView - Semantic Version)
</SemanticZoom.ZoomedInView>
</SemanticZoom>
ScrollViewer (Snap View)
Grid
ListView (Vertical)
The way to do it is like I posted in my question, i.e. the question was asking if it is the right way and the answer is yes.
EitanB
I am trying to implement a semantic zoom in C#/Xaml for Windows 8. I succeed in displaying the zoom out and the zoom in. But when i click on item in the zoom out view I always come back to the first item of my zoom-in view.
here is how I grouped my items :
public IEnumerable<object> ListByCategory()
{
var query = from item in listArticles.listArticles
orderby item.categorie
group item by item.categorie into g
select g;
return query;
}
I used this to display the same collection of grouped items to the zoom out and zoom in views :
this.cvs1.Source = App.api.ListByCategory();
(semanticZoom.ZoomedOutView as ListViewBase).ItemsSource =
this.cvs1.View.CollectionGroups;
and my xaml code is
<ScrollViewer
x:Name="itemGridScrollViewer"
AutomationProperties.AutomationId="ItemGridScrollViewer"
Grid.Row="1"
Margin="0,-3,0,0"
Style="{StaticResource HorizontalScrollViewerStyle}">
<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
<GridView Foreground="Black" SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Group.Key}"
FontFamily="Segoe UI Light"
FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid ItemWidth="200" ItemHeight="200" MaximumRowsOrColumns="2"
VerticalChildrenAlignment="Center" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<local:MyGridView x:Name="PicturesGridView" SelectionMode="None"
ItemsSource="{Binding Source={StaticResource cvs1}}" IsItemClickEnabled="True" ItemTemplate="{StaticResource CustomTileItem}" ItemClick="ItemView_ItemClick" IsSwipeEnabled="True">
<local:MyGridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</local:MyGridView.ItemsPanel>
<local:MyGridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Button Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</local:MyGridView.GroupStyle>
</local:MyGridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
</ScrollViewer>
Thank you for your help.
I found the solution in the link that Depechie posted.
Replacing the ScrollViewer with SemanticZoom
The first and most important thing to do is to completely remove the ScrollViewer named “itemGridScrollViewer” from the Movies.xaml. The SemanticZoom control won’t work correctly if it’s inside the ScrollViewer.
Many people have problems getting the ZoomedOutView and ZoomedInView “in sync”. The usual problem is that when the item in ZoomedOutView is clicked, the ZoomedInView doesn’t scroll to the correct position. The reason for this problem usually is that the SemanticZoom –control is inside a ScrollViewer.
So effectively, I just remove the scrollViewer and it works like a charm :
<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom"
Grid.Row="1"
Margin="0,-3,0,0">
<SemanticZoom.ZoomedOutView>
<GridView Foreground="Black" SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Group.Key}"
FontFamily="Segoe UI Light"
FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid ItemWidth="200" ItemHeight="200" MaximumRowsOrColumns="2"
VerticalChildrenAlignment="Center" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<local:MyGridView x:Name="PicturesGridView" SelectionMode="None"
ItemsSource="{Binding Source={StaticResource cvs1}}" IsItemClickEnabled="True" ItemTemplate="{StaticResource CustomTileItem}" ItemClick="ItemView_ItemClick" IsSwipeEnabled="True">
<local:MyGridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</local:MyGridView.ItemsPanel>
<local:MyGridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Button Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</local:MyGridView.GroupStyle>
</local:MyGridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
Bit difficult to see why it isn't working, so my option for you is to try working 'back' from a working solution: take a look at http://mikaelkoskinen.net/winrt-step-by-step-tutorial-mvvm-gridview-semanticzoom/ for a very good detailed example!
I think grouping may be the key here. Make sure your CollectionViewSource has IsSourceGrouped="True".
Also, you don't need to set
ItemsSource = this.cvs1.View.CollectionGroups;
It can be set
ItemsSource = this.cvs1;