After using MahApp Metro formy project in WPF I encountered a problem I can't solve. the framework works fine except when I am using the NumericUpDown control.
I can see this control onto my UserControl while I'am working on it. But at the compilation the code then becomes :
The tag 'NumericUpDown' does not exist in XML namespace "http://metro.mahapps.com/winfx/xaml/controls". Line 75 Position 26.
With my XAML code it could perhaps help :
<UserControl x:Class="FullTest.Tabs.DataGridStrategie" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:convertors="clr-namespace:FullTest.ModelView.Convertors"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:utils="clr-namespace:FullTest.UtilityClasses"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<BooleanToVisibilityConverter x:Key="BoolToVis"/>
<ObjectDataProvider MethodName="GetType"
ObjectType="{x:Type sys:Type}" x:Key="colorsTypeOdp">
<ObjectDataProvider.MethodParameters>
<sys:String>System.Windows.Media.Colors, PresentationCore, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35</sys:String>
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
<ObjectDataProvider ObjectInstance="{StaticResource colorsTypeOdp}" MethodName="GetProperties" x:Key="colorPropertiesOdp">
</ObjectDataProvider>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/emerald.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<DataGrid ItemsSource="{Binding Path=Str...}"
Grid.Row="0"
AutoGenerateColumns="False" Margin="0,0,-172,0" x:Name="MainGrid">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Colors ..." Width="Auto">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="superCombo" ItemsSource="{Binding Source={StaticResource colorPropertiesOdp}}" SelectedItem="{Binding BrushColor, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Width="20" Height="20" Margin="5" Background="{Binding Name}"/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Name of ..." x:Name="Str.." Width="150">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBox Name="itemNameTextBox" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Typ o....">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="TypeStrat" ItemsSource="{Binding Path=Typ....}" SelectedIndex="{Binding Index, UpdateSourceTrigger=PropertyChanged, Mode= TwoWay}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Here Appears the problem due to the controller-->
<DataGridTemplateColumn Header="">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<controls:NumericUpDown Grid.Row="0"
Grid.Column="1"
Height="23"
Margin="5,5,5,5"
Interval="1"
StringFormat="{}{0:###0}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
I could provide more information if it can be useful.
Related
How can we use the UWP's GridView to look like the following WPF DataGrid?
Remark: The data binding is not important. You can just assume a Pseudo-code (psedo class with attributes MyTableId, DateModified, Author).
WPF DataGrid XAML:
<Window x:Class="MyWPFProj.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
...........
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="103*"/>
<ColumnDefinition Width="697*"/>
</Grid.ColumnDefinitions>
<DataGrid x:Name="dgMathDocs" IsReadOnly="True" AutoGenerateColumns="False" SelectionMode="Single" Margin="0,43,0,0" Grid.ColumnSpan="2">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Edit">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btnEdit" Content="Edit" Click="btnEdit_Click"></Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Delete">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btnDelete" Content="Delete" Click="btnDelete_Click"></Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="ID" Visibility="Collapsed" Binding="{Binding MyTableId}" />
<DataGridTemplateColumn Header="Date Modified">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<DatePicker SelectedDate="{Binding DateModified}" BorderThickness="0" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Author" Binding="{Binding Author}"/>
</DataGridHyperlinkColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
WPF DataGrid Display of the above XAML:
You could try to use DataGrid from Windows Community Toolkit.
More information you can find from Sample App on GitHub
So I've been struggeling with this really badly and I don't understant any of the found "answers"... I have a menu which I want to use on multiple pages, but not all of them. So I have an "index" page with a splitview in it, to have a menu on the side and the content on the right. But I want to be able to "include" the menu, to be able to edit just one file and not to write in every page the menu again... Below you can find my code of one page;
<Page
x:Class="RittensportRekenSoftware.Views.Index"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:RittensportRekenSoftware.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RequestedTheme="Dark">
<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
<SplitView.Pane>
<!-- Here will the menu be included, so we don't have to re-render it every time again and it's changeable from withing one file -->
<StackPanel Background="#202225" RequestedTheme="Dark">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent"/>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<TextBlock Text="Content here :D" FontSize="54" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</SplitView.Content>
</SplitView>
</Page>
Now, It would be great to have something like "include menu" that gets the content from a file in Views.Layouts.Menu.xaml, except I have no idea how such file should be made and how to include.
Kindest regards
Robin
Now, It would be great to have something like "include menu" that gets the content from a file in Views.Layouts.Menu.xaml, except I have no idea how such file should be made and how to include.
Making a UserControl was on the right dirction. Please follow my following step to have a try:
Right click your project - Add - New Item - Select User Control
Copy your code into this UserControl XAML page like the following:
<UserControl
x:Class="AppSplit.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppSplit"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
<SplitView.Pane>
<!-- Here will the menu be included, so we don't have to re-render it every time again and it's changeable from withing one file -->
<StackPanel Background="#202225" RequestedTheme="Dark">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<TextBlock Text="Content here :D" FontSize="54" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</SplitView.Content>
</SplitView>
</UserControl>
public sealed partial class MyUserControl1 : UserControl
{
public MyUserControl1()
{
this.InitializeComponent();
}
private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
MySplitView.IsPaneOpen = MySplitView.IsPaneOpen == true ? false : true;
}
}
If you want to include this UserControl on other XAML pages, you could do like the following:
<Page
x:Class="AppSplit.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppSplit"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<local:MyUserControl1></local:MyUserControl1>
</Page>
I'm porting over some Win RT code to UWP. One of the pages that doesn't work as expected is the HubPage.
I have a button in the HubSection HeaderTemplate which should be replacing the "see more" HyperLink. My button in my template appears but doesn't accept clicks.
The documentation states that I should be able to replace the "see more" hyperlink with my own template, I believe this is what my code is doing but doesn't work.
I'm unsure what value IsHeaderInteractive should be if I've attempting to replace the HubSection HeaderTemplate. Any help apprecaited
<Page
x:Class="Hub_Page.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Hub_Page"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style TargetType="HubSection">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Button Content="This doesn't click!"
Background="DarkCyan" Tapped="UIElement_OnTapped"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="outerGrid">
<Grid x:Name="innerGrid"
VerticalAlignment="Top">
<Hub x:Name="hub" SectionHeaderClick="Hub_OnSectionHeaderClick" >
<Hub.Header>
<!-- Back button and page title -->
<Grid>
<StackPanel Margin="13,0,20,0" Orientation="Horizontal">
<Button x:Name="backButton" Margin="0,0,20,0"/>
<TextBlock Text="x Manage Playlists" Margin="0,0,10,5" HorizontalAlignment="Left"/>
<Button Content="This does click"
Background="DarkGray" Tapped="UIElement_OnTapped"/>
</StackPanel>
</Grid>
</Hub.Header>
<!-- Playlists section -->
<HubSection Header="x Playlists" IsHeaderInteractive="True" >
<DataTemplate>
<ListView x:Name="playlistListView"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
SelectionMode="Single">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<!-- A playlist -->
<Grid HorizontalAlignment="Stretch">
<StackPanel Margin="10" Orientation="Vertical" HorizontalAlignment="Stretch" MaxWidth="500">
<TextBlock Text="{Binding Name}" TextTrimming="WordEllipsis" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Grid>
</Grid>
</Page>
It's by design. You could make your own HubSection's button by yourself. For example like the following:
<HubSection>
<DataTemplate>
<StackPanel>
<Button Content="Header" Click="Button_Click" Margin="0 0 0 10"></Button>
<TextBlock Text="here is content."></TextBlock>
</StackPanel>
</DataTemplate>
</HubSection>
I am trying to display an selected listview item in a ContentPresenter.
The ListView is populated from the PlayersViewModel. The items presenting a PlayerViewModel.
Now I want to display the selected PlayerViewModel outside the ListView in an ContentPresenter. In the design view only the Content binded type is shown. Like: PlayersViewModel.CurrentPlayer.
How can I make the ContentPresenter work the same way as the ListView.ItemTemplate?
Thanks in advance.
<ListView ItemsSource="{x:Bind PlayersViewModel.Players}" SelectedIndex="{x:Bind PlayersViewModel.Index}" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">
<ListView.ItemTemplate>
<DataTemplate x:DataType="viewModels:PlayerViewModel">
<Viewbox>
<StackPanel BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{x:Bind Name}" />
<TextBlock Text="{x:Bind Score, Mode=TwoWay}" />
</StackPanel>
</Viewbox>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentPresenter Grid.Row="0" Grid.Column="1" Content="{x:Bind PlayersViewModel.CurrentPlayer}">
<ContentPresenter.Resources>
<DataTemplate x:Key="dataTemplateCurrentPlayer" x:DataType="viewModels:PlayerViewModel">
<StackPanel BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{x:Bind Name}" />
<TextBlock Text="{x:Bind Score, Mode=TwoWay}" />
</StackPanel>
</DataTemplate>
</ContentPresenter.Resources>
</ContentPresenter>
<UserControl x:Class="App1.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<DataTemplate x:DataType="viewModels:PlayerViewModel"
x:Key="PlayerTemplate">
<Viewbox>
<StackPanel BorderBrush="Black"
BorderThickness="1">
<TextBlock Text="{x:Bind Name}" />
<TextBlock Text="{x:Bind Score, Mode=TwoWay}" />
</StackPanel>
</Viewbox>
</DataTemplate>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<ListView ItemsSource="{x:Bind PlayersViewModel.Players}"
SelectedIndex="{x:Bind PlayersViewModel.Index}"
ItemTemplate="{StaticResource PlayerTemplate}" />
<ContentControl Grid.Column="1"
Content="{x:Bind PlayersViewModel.CurrentPlayer}"
ContentTemplate="{StaticResource PlayerTemplate}" />
</Grid>
</UserControl>
You can use ListView Footer Template to show detailed information of selected item
<ListView ItemsSource="{x:Bind PlayersViewModel.Players}" SelectedIndex="{x:Bind PlayersViewModel.Index}" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">
<ListView.ItemTemplate>
<DataTemplate x:DataType="viewModels:PlayerViewModel">
<Viewbox>
<StackPanel BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{x:Bind Name}" />
<TextBlock Text="{x:Bind Score, Mode=TwoWay}" />
</StackPanel>
</Viewbox>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.FooterTemplate>
<DataTemplatex:DataType="viewModels:PlayerViewModel">
<StackPanel BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{x:Bind PlayersViewModel.CurrentPlayer.Name}" />
<TextBlock Text="{x:Bind PlayersViewModel.CurrentPlayer.Score, Mode=TwoWay}" />
</StackPanel>
</DataTemplate>
</ListView.FooterTemplate>
</ListView>
Or other way is you can use just Stackpanel
<StackPanel BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{x:Bind PlayersViewModel.CurrentPlayer.Name}" />
<TextBlock Text="{x:Bind PlayersViewModel.CurrentPlayer.Score, Mode=TwoWay}" />
</StackPanel>
Hope this works..
I trying to build a winRT metro application that use a GridView. I get the GridView and it looks like I want it to do. But the horizontal scroll doesn't work. When I drag the content it move but when I release it, it will return to start.
Anyone that know why it doesn't work?
<Page
x:Class="WR.Levels"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Wordy"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:uc="using:Wordy.UserControls"
mc:Ignorable="d">
<UserControl.Resources>
<CollectionViewSource x:Name="cvsLevels" IsSourceGrouped="True"/>
<CollectionViewSource x:Name="cvsCategories" IsSourceGrouped="True" ItemsPath="Levels"/>
</UserControl.Resources>
<Canvas x:Name="innertialCanvas"
Grid.Row="1"
Background="#FF3D6E4F"
>
<uc:BG HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="84"/>
<RowDefinition Height="700"/>
</Grid.RowDefinitions>
<StackPanel Margin="20,20,0,0" Grid.Row="0" Orientation="Horizontal">
<Button x:Name="backButton" Style="{StaticResource BackButtonStyle}" Margin="10" VerticalAlignment="Center" >Back</Button>
<TextBlock Name="appName" Text="WR" FontSize="48" VerticalAlignment="Center" />
</StackPanel>
<GridView ItemsSource="{Binding Source={StaticResource cvsCategories}}" Margin="0,0,0,0"
IsItemClickEnabled="True" SelectionMode="None" MaxHeight="700" Grid.Row="1"
AutomationProperties.AutomationId="LevelsGrid">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Width="150" Height="130" Margin="10" AutomationProperties.AutomationId="Level">
<StackPanel.Background>
<SolidColorBrush Color="White" Opacity="0.2" />
</StackPanel.Background>
<StackPanel Orientation="Horizontal" Margin="10">
<uc:Stars Height="50" Width="50" />
<uc:Stars Height="50" Width="50" />
</StackPanel>
<TextBlock Text="{Binding Name}" Margin="0,10,0,0" FontSize="24" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0">
<TextBlock Text='{Binding Name}'
Foreground="White" Margin="20"
Style="{StaticResource HeaderTextStyle}" AutomationProperties.AutomationId="LevelGroup"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Margin" Value="3,0"/>
</Style>
</GroupStyle.ContainerStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
</Canvas>
</Page>
When I removed the canvas tag it worked!