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
Related
So I have this XAML as my UserControl. I have an Expander for each property I need to use. In the Header property of the Expander I've done binding to a DataTemplate to use a Image Button. What I need is to edit the fields inside the Expander (put them enabled) when I click the Image Button. But since it is inside of a DataTemplate I don't see the way to ask for it's "major parent" (Expander) and then ask the parent (Expander) to enable the fields.
This is the code of my XAML (the variables are in Spanish)
<UserControl x:Class="Guardian_GUI.Vistas.Recursos.AcordionSupertipos"
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"
mc:Ignorable="d"
d:DesignHeight="700" d:DesignWidth="1500">
<UserControl.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid Name="conten" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding}" Margin="15 8 15 0" ></TextBlock>
<Button Click="EditarValores" Background="Transparent" Template="{DynamicResource imagenBoton}" Grid.Column="1"/>
</Grid>
</DataTemplate>
<Style TargetType="DockPanel" x:Key="CeldaPropiedades">
<Setter Property="Background" Value="#d08e38"/>
<Setter Property="Margin" Value="5" />
<Setter Property="MinHeight" Value="35" />
</Style>
<Style TargetType="DockPanel" x:Key="CeldaValores">
<Setter Property="Background" Value="#d08e38"/>
<Setter Property="Margin" Value="5" />
<Setter Property="Height" Value="35" />
</Style>
</UserControl.Resources>
<Grid>
<ScrollViewer Name="scroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Grid.Row="2" Margin="0 0 0 40">
<StackPanel >
<ItemsControl Name="lista" BorderThickness="0"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding ListaSuperTiposEnumerados}" Margin="0" Padding="0" Background="Transparent">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Header="{Binding Nombre}" BorderThickness="1" Width="1450" HeaderTemplate="{DynamicResource DataTemplate1}" BorderBrush="#8b8b8b" FontFamily="Myriad Pro" FontStyle="Italic"
FontSize="18" Foreground="#f2f2f2" Background="#333333" VerticalAlignment="Top" Padding="10" >
<ScrollViewer Height="400" ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="-10,-10" >
<StackPanel>
<StackPanel Margin="0 20 0 0" >
<DockPanel Grid.Row="0" Grid.ColumnSpan="1" Background="#89673c" Margin="5" MinHeight="35">
<TextBlock Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="24" Text="Valores" Grid.Column="0" Grid.Row="0" Margin="0,0,107,0"/>
<CheckBox Content="Editar valores" Name="editadorValores" Margin="0 8 0 0" Foreground="#f2f2f2"/>
</DockPanel>
<Grid Margin="10,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="440"/>
<ColumnDefinition Width="400"/>
<ColumnDefinition Width="160"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DockPanel Grid.Column="0" Grid.Row="1" Style="{StaticResource CeldaValores}" >
<TextBlock Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="20" Text="Id" Grid.Column="0" Grid.Row="1" Margin="0,0,107,0"/>
</DockPanel>
<DockPanel Grid.Column="1" Grid.Row="1" Style="{StaticResource CeldaValores}" >
<TextBlock Name="valores" Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="20"
Text="Nombre" Grid.Column="1" Grid.Row="1" IsEnabled="{Binding ElementName=algod, Path=IsChecked}" Margin="0,0,107,0"/>
</DockPanel>
<DockPanel Grid.Column="2" Grid.Row="1" Style="{StaticResource CeldaValores}" >
<TextBlock Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="20" Text="Descripción" Grid.Column="2" Grid.Row="1" Margin="0,0,107,0"/>
</DockPanel>
<DockPanel Grid.Column="3" Grid.Row="1" Style="{StaticResource CeldaValores}" >
<TextBlock Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="20" Text="Valor" Grid.Column="3" Grid.Row="1" Margin="0,0,0,0"/>
</DockPanel>
</Grid>
<ItemsControl Name="lista_2" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding ValoresSuperTipo}" Margin="0 0 0 15" Padding="0" Background="Transparent"
>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="10,5,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="440"/>
<ColumnDefinition Width="400"/>
<ColumnDefinition Width="160"/>
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0" Style="{StaticResource CeldaValores}" >
<TextBox ToolTip="{Binding Id}" Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="16"
Text="{Binding Id}" Grid.Column="0" Margin="0,0,0,0" Width="100" IsEnabled="{Binding IsChecked, ElementName=editadorValores}"/>
</DockPanel>
<DockPanel Grid.Column="1" Style="{StaticResource CeldaValores}" >
<TextBox ToolTip="{Binding Nombre}" Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="16"
Text="{Binding Nombre}" Grid.Column="0" Margin="0,0,0,0" Width="400" IsEnabled="{Binding IsChecked, ElementName=editadorValores}"/>
</DockPanel>
<DockPanel Grid.Column="2" Style="{StaticResource CeldaValores}" >
<TextBox ToolTip="{Binding Descripcion}" Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="16" Width="360"
Text="{Binding Descripcion}" Grid.Column="0" Margin="0,0,0,0" IsEnabled="{Binding IsChecked, ElementName=editadorValores}"/>
</DockPanel>
<DockPanel Grid.Column="3" Style="{StaticResource CeldaValores}">
<TextBox ToolTip="{Binding valor}" Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="16" Width="120"
Text="{Binding valor}" Grid.Column="0" Margin="0,0,0,0" IsEnabled="{Binding IsChecked, ElementName=editadorValores}"/>
</DockPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
<Button Content="Guardar" Style="{DynamicResource Boton_1}" HorizontalAlignment="Right" Width="120" VerticalAlignment="Bottom" Grid.Row="3" Click="BotonPersistir"/>
<Button Content="Volver" Style="{DynamicResource Boton_1}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="120" Margin="0,0,120,0" Click="BotonVolver" />
</Grid>
</UserControl>
When the event runs I ask for the Parent and TemplatedParent but neither of them are the Expander I need.
private void EditarValores(object sender, RoutedEventArgs e)
{
Button boton = sender as Button;
var Parent = boton.Parent; //It returns a Grid
var TemplatedParent = boton.TemplatedParent; //It returns a ContentPresenter
}
I appreciate your help
from : this blog
you can run this method on your button to get the expander
as:
Expander expander = FindMyParentHelper<Expander>.FindAncestor(boton);
public static class FindMyParentHelper<T> where T : DependencyObject
{
public static T FindAncestor(DependencyObject dependencyObject)
{
var parent = VisualTreeHelper.GetParent(dependencyObject);
if (parent == null) return null;
var parentT = parent as T;
return parentT ?? FindAncestor(parent);
}
}
Here I have a ListBox:
<ListBox Name="listbox1" ItemsSource="{Binding Area}" Grid.Column="0" Grid.Row="0" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Green" BorderThickness="2" Margin="5" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0" Margin="2">
<TextBox PreviewTextInput="minMaxPreviewInput" IsReadOnly="{Binding AutoChange}" Text="{Binding MinIntValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="30" DockPanel.Dock="Right" TextAlignment="Right"/>
<TextBlock Text="Minimum Value" DockPanel.Dock="Left"/>
</DockPanel>
<DockPanel Grid.Row="1" Grid.Column="0" Margin="2">
<TextBox PreviewTextInput="minMaxPreviewInput" IsReadOnly="{Binding AutoChange}" Text="{Binding MaxIntValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="30" DockPanel.Dock="Right" TextAlignment="Right"/>
<TextBlock Text="Maximum Value" DockPanel.Dock="Left"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="0" Margin="2">
<TextBlock Text="{Binding AreaName}" FontSize="20" DockPanel.Dock="Left"/>
<TextBlock Text=":" FontSize="20" DockPanel.Dock="Left"/>
<TextBlock Text="{Binding Start}" FontSize="20" DockPanel.Dock="Left"/>
<CheckBox FlowDirection="RightToLeft" DockPanel.Dock="Right" IsChecked="{Binding AutoChange, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<TextBlock FlowDirection="LeftToRight" Text="Auto-Change:" />
</CheckBox>
</DockPanel>
<Border BorderBrush="Blue" BorderThickness="1" Grid.Column="1" Grid.RowSpan="3" Margin="5">
<Canvas Name="canvas1" >
<Canvas.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="-1" CenterX=".5" CenterY=".5" />
</Canvas.LayoutTransform>
<Polyline Points="{Binding SegmentPoints}" Stroke="Black" StrokeThickness="1"/>
</Canvas>
</Border>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Everything works as great. I'm having problem accessing the Canvas size. How can I access it? Listbox.ActualHeight and ListBox.ActualWidth are bigger than the Canvas, and I need to get the Canvas exact size.
Thanks for the help in advance.
As you are trying to base the value of other bound values on the Canvas size, use OneWayToSource mode on a Binding for ActualWidth and ActualHeight to some properties on your ViewModel.
This will push the values from the control into your ViewModel allowing you to adjust the values in SegmentPoints so that they are scaled correctly according to the Canvas size.
how this type of data grid template can be created??
i can't find any way to make this template.
or can u suggest other way??
i.e. grid view or so and how!
The last column are not required as of now.
CodeBehind:
var pp = from asd in db.OrderMasters
select new
{
asd.CFN,
asd.Location,
asd.CreatedOn,
asd.Quantity
};
dgOrderMaster.ItemsSource = pp.ToList();
Markup:
<DataGrid x:Name="dgOrderMaster" HorizontalContentAlignment="Center" BorderThickness="1" Margin="10" Grid.Row="3">
i worked around, and found listview is way more helpfull for my task,
Here's the markup:
<ListView Name="lvDataBinding" HorizontalContentAlignment="Stretch" BorderThickness="0" Margin="10" Grid.Row="3" Background="{x:Null}">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="0" CornerRadius="3" Margin="0,3" Grid.ColumnSpan="4" Background="White">
<Grid Background="White" Margin="0,1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Margin="50,5" >
<TextBlock Text="Customer" Foreground="#33B6EF" FontSize="20" />
<TextBlock Text="{Binding cust}" FontSize="20" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1">
<TextBlock Text="Location" Foreground="#33B6EF" FontSize="20" />
<TextBlock Text="{Binding loc}" FontSize="20" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<TextBlock Text="Created On" Foreground="#33B6EF" FontSize="20" />
<TextBlock Text="{Binding con}" FontSize="20" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="3">
<TextBlock Text="Quantity" Foreground="#33B6EF" FontSize="20" />
<TextBlock Text="{Binding quant}" FontSize="20" />
</StackPanel>
</Grid>
<Border.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="5" />
</Border.Effect>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
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>
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>