Develop Reference

ItemsControl inside wrappanel not using all available space

I have many elements inside an itemscontrol. This itemscontrol is inside a scrollviewer which is parented by a Wrappanel. With or without this scrollviewer, the elements will stack below eachother and never use all the available space. What am i doing wrong? The wrappanel is inside a grid.
<TabItem Header="Game Sessions">
<Grid Margin="4,5,4,0">
<WrapPanel HorizontalAlignment="Stretch" Name="sessionsWrapPanel">
<Grid>
<ScrollViewer>
<Grid>
<ItemsControl Name="listVideosSessions">
<ItemsControl.ItemTemplate>
<DataTemplate>
<materialDesign:Card Width="200" Margin="5,5,5,5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding sessionVideoThumbnail}" Height="140" Width="196" Stretch="UniformToFill" />
<Button Grid.Row="0" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 16 -20">
<materialDesign:PackIcon Kind="Bike" />
</Button>
<StackPanel Grid.Row="1" Margin="8 24 8 0">
<TextBlock FontWeight="Bold">
<Run Text="{Binding sessionsVideoRecordDate}" />
</TextBlock>
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center">
<Run Text="{Binding sessionsVideoRecordtime}" />
</TextBlock>
</StackPanel>
<StackPanel HorizontalAlignment="Right" Grid.Row="2" Orientation="Horizontal" Margin="8">
<Button Style="{StaticResource MaterialDesignToolButton}" Width="30" Padding="2 0 2 0" materialDesign:RippleAssist.IsCentered="True">
<materialDesign:PackIcon Kind="ShareVariant" />
</Button>
<Button Style="{StaticResource MaterialDesignToolButton}" Width="30" Padding="2 0 2 0" materialDesign:RippleAssist.IsCentered="True">
<materialDesign:PackIcon Kind="Heart" />
</Button>
<materialDesign:PopupBox Style="{StaticResource MaterialDesignToolPopupBox}" Padding="2 0 2 0">
<StackPanel>
<Button Content="More" />
<Button Content="Options" />
</StackPanel>
</materialDesign:PopupBox>
</StackPanel>
</Grid>
</materialDesign:Card>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</ScrollViewer>
</Grid>
</WrapPanel>
</Grid>
</TabItem>

It's not really clear what you are trying to achieve, but a scrollable ItemsControl that uses a WrapPanel for the layout of its items, should look like this:
<ItemsControl ItemsSource="{Binding ...}">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Wpf create dynamic table using Itemsources

I managed to create this table using stackpanels and itemscontrols but it takes ages to load after all. In my ViewModel I have a list of hotels which contain rooms. Every room for every day in a range I set can be booked or not etc. So in my View I need to show the this data in a dynamic table (?) where every row will have each hotel then each hotel will have each room, then columns of months and every date etc as you can see in picture. At last every square is a button with a tool-tip showing more info and if clicked it has to select the row and column. I managed to do this for the column by setting the bolder color. Everything works but I thing this is not a correct implementation and it also needs to much time to render.
Here is my output
and the xaml
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled">
<Border BorderBrush="Black"
BorderThickness="1"
Visibility="{Binding IsPlanVisible, Converter={StaticResource BoolToVisibilityConverter}}"
VerticalAlignment="Top"
HorizontalAlignment="Left">
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
<Border Width="150"
BorderBrush="Black"
BorderThickness="0,0,0,1">
<TextBlock Text="Hotel"
Margin="5,0"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border BorderBrush="Black"
Width="110"
BorderThickness="1,0,1,1">
<TextBlock Text="RoomType" Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ItemsControl ItemsSource="{Binding Months}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--<Border>-->
<StackPanel Orientation="Vertical"
Background="{Binding Background}">
<TextBlock Text="{Binding Name}"
MinHeight="30"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
<ItemsControl ItemsSource="{Binding Days }">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black"
Width="22"
BorderThickness="0,1,1,1">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding}"
HorizontalAlignment="Center" />
<ToggleButton Width="22"
HorizontalAlignment="Center"
IsChecked="{Binding IsSelected,UpdateSourceTrigger=PropertyChanged}"
Command="{Binding DataContext.ToggleDateCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
CommandParameter="{Binding Date}">
<TextBlock Text="{Binding Date, StringFormat='{}{0:dd}' }"
HorizontalAlignment="Center" />
</ToggleButton>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<!--</Border>-->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<!--Hotels Item Control-->
<!--Each Row-->
<ScrollViewer Grid.Row="1"
Margin="0,-1,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled">
<ItemsControl ItemsSource="{Binding FilteredPlanList}"
VerticalAlignment="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--Each Hotel-->
<Border BorderBrush="Black"
Width="150"
BorderThickness="0,1,0,0"
HorizontalAlignment="Center">
<TextBlock Text="{Binding Name}"
Padding="5,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<!--Rooms Row-->
<ItemsControl ItemsSource="{Binding Rooms}"
HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--Each Room Row-->
<StackPanel Orientation="Horizontal">
<Border BorderBrush="Black"
Width="109"
BorderThickness="1,1,0,0"
HorizontalAlignment="Center">
<TextBlock Text="{Binding RoomType }"
Margin="0,1"
HorizontalAlignment="Center" />
</Border>
<!--Rectangles ItemSource-->
<ItemsControl ItemsSource="{Binding BookedInfoList}"
HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Background="{Binding Converter={StaticResource BConverter}}"
HorizontalAlignment="Stretch"
Width="22"
ToolTipService.IsEnabled="{Binding Reservation,Converter={StaticResource ToolTipVis}}"
BorderBrush="{Binding IsDateSelected,Converter={StaticResource BoolToBorderColorConverter}}"
BorderThickness="1,0,0,1">
<Button.InputBindings>
<MouseBinding Gesture="LeftDoubleClick"
Command="{ Binding DataContext.ViewReservationCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
CommandParameter="{Binding Reservation}" />
</Button.InputBindings>
<Button.ToolTip>
<StackPanel>
<Grid Margin="0,0,0,5"
DataContext="{Binding Reservation}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170" />
<ColumnDefinition Width="130" />
</Grid.ColumnDefinitions>
<!--Row 0-->
<Border BorderBrush="Black"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Stretch"
BorderThickness="1">
<TextBlock Text="{Binding Dates}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="5,0" />
</Border>
<Border BorderBrush="Black"
Grid.Row="0"
HorizontalAlignment="Stretch"
Grid.Column="1"
BorderThickness="0,1,1,1"></Border>
<Border BorderBrush="Black"
Grid.Row="1"
Grid.Column="0"
HorizontalAlignment="Stretch"
BorderThickness="1,0,1,1">
<TextBlock Margin="5,0"
HorizontalAlignment="Center"
Text="{Binding Room.Hotel}" />
</Border>
<Border BorderBrush="Black"
Grid.Row="1"
HorizontalAlignment="Stretch"
Grid.Column="1"
BorderThickness="0,0,1,1">
<TextBlock Margin="5,0"
HorizontalAlignment="Center"
Text="{Binding Room.RoomType}" />
</Border>
<!--Row 2-->
<Border BorderBrush="Black"
Grid.Row="2"
Grid.Column="0"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="2"
BorderThickness="1,0,1,1">
<TextBlock Text="{Binding Names}"
Margin="5,0"
FontSize="10"
HorizontalAlignment="Left" />
</Border>
</Grid>
</StackPanel>
</Button.ToolTip>
</Button>
<!--</Border>
</Border>-->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</Border>
</ScrollViewer>

Add xaml to top of Listbox

I have a listbox which is filled up with items taken from a data contract. I want to add a bit of xaml to the top of the listbox which takes data from another data contract. How do i go about doing this?
<phone:PivotItem>
<ScrollViewer>
<StackPanel>
<ListBox x:Name="StatusCommentsList"
Background="Transparent"
ItemsSource="{Binding StatusComments}"
u:ScrollViewerMonitor.AtEndCommand="{Binding FetchMoreStatusCommentsDataCommand}" VerticalContentAlignment="Top">
<!-- THIS DOESNT WORK-->
<ListBoxItem>
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="389"/>
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding Notification.context.data.created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_by.name}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_on}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.rich_value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
</StackPanel>
</Grid>
</ListBoxItem>
<!-- /THIS DOESNT WORK -->
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Style="{StaticResource JamesTransparentButton}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="389"/>
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
<TextBlock Text="{Binding created_by.name}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding created_on}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
<TextBlock TextWrapping="Wrap" Text="{Binding value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</phone:PivotItem>
I tried just adding a new item to the listbox but the data contract would mean i have to instantiate all the sub levels of objects and it would suckkk as they are different domains.
Keep in mind that i want the entire screen to scroll in union... so that it looks like one big long list, regardless of the first being like a default value.

Put the first item outside the ListBox and disable ScrollViewer for the ListBox so the whole thing will scroll together. Here's an example where the item is a simple TextBlock. You can change it to suit your requirement.
<ScrollViewer>
<StackPanel Orientation="Vertical">
<TextBlock Text="Item 1"/>
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding item}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>

Creating multiple tabitems from tabitem template in WPF C# XAML

I read many tutorials from MSDN about WPF styling and datatemplating and contenttemplating but no success.
I need to make same TabItems in my TabControl and I made manually TabItem which i want to use as host for Style and ContentTemplate for other TabItems in TabControl
<TabItem Header="1.semestar">
<Grid x:Name="GridSemestra">
<Grid.DataContext>
<ViewModel:PredmetVM/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<Grid.Children>
<ListBox x:Name="PredmetiLW" Grid.Row="0" BorderThickness="0" Grid.Column="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Naziv}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="RadioLW" Grid.Row="0" Grid.Column="1" BorderThickness="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Ocjena}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="Prosjek Semestra :" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
<Label x:Name="_prosjekSemestra" Grid.Row="1" Grid.Column="1" ContentStringFormat="F2" Content="{Binding _prosjek, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Content="Ostvareni ECTS-ovi :" HorizontalAlignment="right" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" />
<Label x:Name="_ectsSemestra" Grid.Row="2" Grid.Column="1" Content="{Binding _ectsovi, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid.Children>
</Grid>
</TabItem>

This is how you define a style for any TabItem. In the example I created a white border and a black background for the Header content of the TabItem:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border BorderBrush="White" BorderThickness="5" Margin="2">
<Grid Width="100" Height="100" Background="Black">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

If you want your items to render with same template set the ItemTemplate for your TabControl like below:
<TabControl ItemsSource="{Binding MyTabItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="GridSemestra">
<Grid.DataContext>
<ViewModel:PredmetVM/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<Grid.Children>
<ListBox x:Name="PredmetiLW" Grid.Row="0" BorderThickness="0" Grid.Column="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Naziv}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="RadioLW" Grid.Row="0" Grid.Column="1" BorderThickness="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Ocjena}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="Prosjek Semestra :" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
<Label x:Name="_prosjekSemestra" Grid.Row="1" Grid.Column="1" ContentStringFormat="F2" Content="{Binding _prosjek, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Content="Ostvareni ECTS-ovi :" HorizontalAlignment="right" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" />
<Label x:Name="_ectsSemestra" Grid.Row="2" Grid.Column="1" Content="{Binding _ectsovi, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid.Children>
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
Doing this, for all the items in property MyTabItems, TabItems will be generated

Page scrollbar windows 8

my problem is that I have only scrollbar for gridview but don't have scrollbar for entire page. Scrollbar should be at the bottom of the page, horizontal. I tried to add scrollbar to the bottom, but it doesn't appear on the page. I've also posted a link to the picture for better understanding. http://i40.tinypic.com/2rm0389.png Sorry that i have only a link, because i need 10 reputation to post images here, it is so bad.
Thanks in advance.
Here is my code (XAML), not entire page, my scrollbar at the bottom:
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="Профиль" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<Grid Width="Auto" Margin="0,5,0,0" Grid.Row="1"
>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ProfileImage}" Stretch="UniformToFill" HorizontalAlignment="Left" Height="270" Margin="165,46,0,0" VerticalAlignment="Top" Width="225"/>
<TextBlock Text="{Binding Name}" HorizontalAlignment="Left" Margin="165,5,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="41" Width="252" FontSize="22" FontWeight="Bold"/>
<GridView x:Name="GridViewToFrinedsPhoto" Margin="461,0,0,0"
ItemsSource="{Binding Mode=TwoWay, Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource MyPhotoItemTemplate}"
SelectionMode="Single"
IsItemClickEnabled="True"
IsSwipeEnabled="false" ItemClick="GridViewToFrinedsPhoto_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
x:Name="ColumnBtn"
AutomationProperties.Name="Group Title" AutomationProperties.LabeledBy="{Binding Title}"
Style="{StaticResource TextPrimaryButtonStyle}" Click="Button_Click_1">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<ScrollBar VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="Auto" RenderTransformOrigin="0.588,-0.824" Visibility="Visible" Margin="0,0,0,603" Orientation="Horizontal" /> -- HERE IS MY SCROLLBAR, DOESN'T WORK :[
</Grid>
</Grid>

My Final code, i hope it helps someone else, I have used scrollviewer and grid container, thanks to Vishal Kaushik from MSDN
<common:LayoutAwarePage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:VKClient.Views"
xmlns:common="using:VKClient.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vkControls="using:VKClient.VkControls"
xmlns:Controls="using:Callisto.Controls"
x:Name="pageRoot"
x:Class="VKClient.Views.ProfileViewPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Mode=Self}}"
mc:Ignorable="d">
<common:LayoutAwarePage.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="../Resources/MyStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
<CollectionViewSource x:Name="groupedItemsViewSource"
Source="{Binding Items, Mode=TwoWay}"
IsSourceGrouped="True"
ItemsPath="Items"/>
</ResourceDictionary>
</common:LayoutAwarePage.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<common:LayoutAwarePage.BottomAppBar>
<AppBar x:Name="BottomAppBar2" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button x:Name="MyProfileButton" Style="{StaticResource MyProfileAppBarButtonStyle}" Click="MyProfileClicked" />
<Button x:Name="MyFriendsButton" Style="{StaticResource MyFriendsAppBarButtonStyle}" Click="MyFriendsClicked"/>
<Button x:Name="MyPhotoButton" Style="{StaticResource MyPhotoAppBarButtonStyle}" Click="MyPhotoClicked" />
<Button x:Name="MyVideosButton" Style="{StaticResource MyVideoesAppBarButtonStyle}" Click="MyVideoesClicked"/>
<Button x:Name="MyAudioButton" Style="{StaticResource MyAudioAppBarButtonStyle}" Click="MyAudioClicked"/>
<Button x:Name="MyGroupsButton" Style="{StaticResource MyGroupsAppBarButtonStyle}" Click="MyGroupsClicked"/>
<!-- <Button x:Name="MyMessagesButton" Style="{StaticResource MyMessagesAppBarButtonStyle}" Click="MyMessagesClicked"/>
<Button x:Name="MyNewsButton" Style="{StaticResource MyNewsAppBarButtonStyle}" Click="MyNewsClicked"
/> -->
</StackPanel>
</Grid>
</AppBar>
</common:LayoutAwarePage.BottomAppBar>
<Grid Style="{StaticResource LayoutRootStyle}" Background="{StaticResource AccentBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid used in most view states -->
<!-- Vertical scrolling list only used when snapped -->
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="Профиль" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<Grid Width="Auto" Margin="0,5,0,0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"/>
</Grid.ColumnDefinitions>
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled">
<Grid Width="Auto">
<Controls:LiveTile HorizontalAlignment="Left" Margin="20,101,0,0" VerticalAlignment="Top" Width="109" Height="137" Background="LightGreen">
<Controls:LiveTile.ItemTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Style="{StaticResource MyGroupsAppBarButtonStyle}" Margin="0,0,0,41" Grid.RowSpan="2"/>
<HyperlinkButton
HorizontalAlignment="Right"
Foreground="LightGray"
Click="GroupClicked" Height="129" Grid.RowSpan="2" Width="90" />
</Grid>
</DataTemplate>
</Controls:LiveTile.ItemTemplate>
</Controls:LiveTile>
<Controls:LiveTile HorizontalAlignment="Left" Margin="20,273,0,0" VerticalAlignment="Top" Width="109" Height="151" Background="Violet">
<Controls:LiveTile.ItemTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Style="{StaticResource MyAudioAppBarButtonStyle}" Margin="0,0,0,41" Grid.RowSpan="2"/>
<HyperlinkButton
HorizontalAlignment="Right"
Foreground="LightGray"
FontSize="9" FontWeight="Bold" Click="ProfileAudios" Height="139" Grid.RowSpan="2" Width="99" />
</Grid>
</DataTemplate>
</Controls:LiveTile.ItemTemplate>
</Controls:LiveTile>
<Image Source="{Binding ProfileImage}" Stretch="UniformToFill" HorizontalAlignment="Left" VerticalAlignment="Top" Height="270" Margin="165,46,0,0" Width="225"/>
<TextBlock Text="{Binding Name}" Margin="165,5,0,577" TextWrapping="Wrap" HorizontalAlignment="Left" Height="41" Width="252" FontSize="22" FontWeight="Bold"/>
<GridView x:Name="GridViewToFrinedsPhoto" Margin="461,0,0,0"
ItemsSource="{Binding Mode=TwoWay, Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource MyPhotoItemTemplate}"
SelectionMode="Single"
IsItemClickEnabled="True"
IsSwipeEnabled="false" ItemClick="GridViewToFrinedsPhoto_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
x:Name="ColumnBtn"
AutomationProperties.Name="Group Title" AutomationProperties.LabeledBy="{Binding Title}"
Style="{StaticResource TextPrimaryButtonStyle}" Click="Button_Click_1">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
</ScrollViewer>
</Grid>
</Grid>