We Keep Coding

UWP Hub need vertical scrolling

for testing purposes I have a Hub control in UWP that looks like this:
<Hub x:Name="hubTest1">
<HubSection Margin="10,0,0,0" Width="200" Background="CadetBlue" ScrollViewer.VerticalScrollMode="Enabled" HorizontalContentAlignment="Stretch" Header="#" VerticalAlignment="Stretch">
<HubSection.HeaderTemplate>
<DataTemplate>
<TextBlock Foreground="White">This is some Test</TextBlock>
</DataTemplate>
</HubSection.HeaderTemplate>
<DataTemplate>
<ScrollViewer HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="0,0,0,0">
<RichTextBlock Height="1000" Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Stretch">
<Paragraph>
This is a test.
<LineBreak></LineBreak>
This is a test.
<LineBreak></LineBreak>
This is a test.
<LineBreak></LineBreak>
... Repeated many times ...
</Paragraph>
</RichTextBlock>
</ScrollViewer>
</DataTemplate>
</HubSection>
<HubSection Margin="10,0,0,0" Background="BlueViolet" Width="300" Foreground="White" HorizontalContentAlignment="Stretch" Header="#">
<HubSection.HeaderTemplate>
<DataTemplate>
<TextBlock Foreground="White">This is some Test</TextBlock>
</DataTemplate>
</HubSection.HeaderTemplate>
<DataTemplate>
<TextBlock>This is a test 2</TextBlock>
</DataTemplate>
</HubSection>
</Hub>
Where I'm having trouble is I want the first HubSection to be scrollable off the page vertically when filled with more content than the screen. It only goes to the edge though. The inside ScrollViewer does scroll the text down vertically, but it's inside the inner container of the DataTemplate and isn't giving the necessary result. Also the Hub is inside a SplitView.Content container, I'm not sure if that affects the behavior of the Hub or not. I'm wondering if it's possible to get the desired behavior? Any help you guys can give is greatly appreciated.

The inside ScrollViewer doesn't go all the way down because you gave the RichTextBlock a fixed Height of 1000px. Remove it and the problem should go away.
Also it's OK to put the Hub inside a SplitView and have vertically scrolling content too.
Update
If you want the whole HubSection including the header to be scrollable, two things you need to do:
Remove the ScrollViewer inside your DataTemplate.
Create a new Style for your HubSection and inside its
ControlTemplate, insert a new ScrollViewer as its top level
container. Something like this -
<Style x:Key="HubSectionStyle1"
TargetType="HubSection">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="VerticalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Left" />
<Setter Property="VerticalContentAlignment"
Value="Top" />
<Setter Property="Padding"
Value="12,10,12,0" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="UseSystemFocusVisuals"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HubSection">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Border.Resources>
<ControlTemplate x:Key="HeaderButtonTemplate"
TargetType="Button">
<Grid x:Name="ButtonRoot"
Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource HubSectionHeaderButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource HubSectionHeaderButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="ButtonRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource HubSectionHeaderButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ImitatedTextBlock">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource HubSectionHeaderForeground}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
OpticalMarginAlignment="TrimSideBearings"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Border.Resources>
<Grid HorizontalAlignment="Stretch"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle x:Name="HubHeaderPlaceholder"
Grid.Row="0" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button x:Name="HeaderButton"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Grid.Column="0"
Foreground="{ThemeResource HubSectionHeaderButtonForeground}"
FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}"
FontSize="{ThemeResource HubSectionHeaderThemeFontSize}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="False"
IsTabStop="False"
Margin="{ThemeResource HubSectionHeaderThemeMargin}"
Grid.Row="1"
Template="{StaticResource HeaderButtonTemplate}"
UseSystemFocusVisuals="True"
VerticalAlignment="Bottom" />
<Button x:Name="SeeMoreButton"
Grid.Column="1"
Foreground="{ThemeResource HubSectionHeaderButtonForeground}"
FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}"
FontSize="{ThemeResource HubSectionHeaderSeeMoreThemeFontSize}"
HorizontalAlignment="Right"
Margin="{ThemeResource HubSectionHeaderSeeMoreThemeMargin}"
Grid.Row="1"
Template="{StaticResource HeaderButtonTemplate}"
UseSystemFocusVisuals="True"
Visibility="Collapsed"
VerticalAlignment="Bottom" />
</Grid>
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Grid.Row="2"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Border>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Rounded Buttons in XAML for a window store app

This seemed to me a really simple question 2 hours ago, but haven't made any progress with it.
My first search last night, said to create a rounded button, you just put it in a border, and round the edges of the border, like this,,,
<Border BorderThickness="1"
BorderBrush="Black"
CornerRadius="10"
Padding="4"
Background="#FFB8B1B1"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Button Width="45"
Height="35"
Name="GetFileName"
VerticalAlignment="Top"
VerticalContentAlignment="Top"
BorderThickness="0"
FontSize="16"
Foreground="Black"
Tapped="GetFileName_Tapped"
Background="#FFB8B1B1">Pick</Button>
</Border>
This looks good, but I wanted one thing to look better. When you hover over the button the background changes color, but not the background of the border. To achieve this second part has stumped me. Any leads would be appreciated. Thanks, John.

One possibility is to use ControlTemplate and VisualStateManager
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderThickness="1"
x:Name="MBorder"
BorderBrush="Black"
CornerRadius="10"
Padding="4">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="#FFB8B1B1"/>
<Setter Target="MBorder.Background" Value="#FFB8B1B1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="Green"/>
<Setter Target="MBorder.Background" Value="Green"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="Blue"/>
<Setter Target="MBorder.Background" Value="Blue"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="MGrid">
<ContentControl Content="{TemplateBinding Content}"
VerticalContentAlignment="Center"
HorizontalAlignment="Center"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"/>
</Grid>
</Border>
</ControlTemplate>
</Button.Template>
</Button>

I used #Mihkel 's Answer to solve this. However, his answer misses the key ingredient, that being the background of the border. I named the border in the control, as well as set a Template binding in the border. Then referenced that, as well as the background of the button. I am trying to put the changes in bold, but they just appear as **, the code encased in the stars is the changes.
<Button Content="Pick"
Width="45"
Height="35"
VerticalAlignment="Center"
HorizontalAlignment="Center"
BorderThickness="0"
FontSize="16"
Foreground="Black"
Tapped="GetFileName_Tapped"
Background="#FFB8B1B1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderThickness="1"
BorderBrush="Green"
CornerRadius="10"
Padding="4"
**Background="{TemplateBinding Background}"**
Name="TheBorder"
>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="#FFB8B1B1"/>
**<Setter Target="TheBorder.Background" Value="#FFB8B1B1" />**
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="Green"/>
**<Setter Target="TheBorder.Background" Value="Green" />**
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="Blue"/>
**<Setter Target="TheBorder.Background" Value="Blue" />**
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="MGrid">
<ContentControl Content="{TemplateBinding Content}"
VerticalContentAlignment="Center"
HorizontalAlignment="Center"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"/>
</Grid>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
Of note, this is going to be used in an open source project called Essential Video Editor. An early version is in the windows store. The source code is in GitHub.com/gibbloggen And, when I publish this part, I will credit this post, in way of a reference.

ExtendedToolkit DatePicker Calendar FontSize

I am using the ExtendedToolkit for WPF C#. Specifically I am using the DateTimePicker, I have tried changing the font size for this element however it does not change the size of the attached calendar that you use to select the date;
Is there a way to change it's FontSize in the ExtendedToolkit so it appears larger?

I have the requirement for Calendar control to display larger numbers and since DateTimePicker uses Calendar, the same solution applies here.
Calendar has CalendarDayButtonStyle property for customizing date fields. The only property to change is CalendarDayButton.FontSize:
<xctk:DateTimePicker VerticalAlignment="Top">
<xctk:DateTimePicker.Resources>
<Style TargetType="Calendar">
<Setter Property="CalendarDayButtonStyle">
<Setter.Value>
<Style TargetType="CalendarDayButton"
BasedOn="{StaticResource {x:Type CalendarDayButton}}">
<Setter Property="FontSize" Value="16"/>
</Style>
</Setter.Value>
</Setter>
</Style>
</xctk:DateTimePicker.Resources>
</xctk:DateTimePicker>

You can generate a copy of template and style for Calendar and CalendarItem through Blend tool and override the default FontSize. The copy I have generated through Blend is :
<Style x:Key="CalendarStyle1" TargetType="{x:Type Calendar}">
<Setter Property="Foreground" Value="#FF333333"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE4EAF0" Offset="0"/>
<GradientStop Color="#FFECF0F4" Offset="0.16"/>
<GradientStop Color="#FFFCFCFD" Offset="0.16"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Calendar}">
<StackPanel x:Name="PART_Root" HorizontalAlignment="Center">
<CalendarItem x:Name="PART_CalendarItem" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Style="{DynamicResource CalendarItemStyle1}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CalendarItemStyle1" TargetType="{x:Type CalendarItem}">
<Setter Property="Margin" Value="0,3,0,3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarItem}">
<ControlTemplate.Resources>
<DataTemplate x:Key="{x:Static CalendarItem.DayTitleTemplateResourceKey}">
<TextBlock Foreground="#FF333333" FontWeight="Bold" FontSize="9.5" FontFamily="Verdana" HorizontalAlignment="Center" Margin="0,6,0,6" Text="{Binding}" VerticalAlignment="Center"/>
</DataTemplate>
</ControlTemplate.Resources>
<Grid x:Name="PART_Root">
<Grid.Resources>
<SolidColorBrush x:Key="DisabledColor" Color="#A5FFFFFF"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_DisabledVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1">
<Border BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="1">
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="PreviousButtonTemplate" TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF73A9D8" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)" Storyboard.TargetName="path"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Opacity="1" Stretch="Fill"/>
<Grid>
<Path x:Name="path" Data="M288.75,232.25 L288.75,240.625 L283,236.625 z" Fill="#FF333333" HorizontalAlignment="Left" Height="10" Margin="14,-6,0,0" Stretch="Fill" VerticalAlignment="Center" Width="6"/>
</Grid>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="NextButtonTemplate" TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF73A9D8" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)" Storyboard.TargetName="path"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Opacity="1" Stretch="Fill"/>
<Grid>
<Path x:Name="path" Data="M282.875,231.875 L282.875,240.375 L288.625,236 z" Fill="#FF333333" HorizontalAlignment="Right" Height="10" Margin="0,-6,14,0" Stretch="Fill" VerticalAlignment="Center" Width="6"/>
</Grid>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF73A9D8" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="buttonContent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="buttonContent"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="buttonContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" TextElement.Foreground="#FF333333" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,4,1,9" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="PART_PreviousButton" Grid.Column="0" Focusable="False" HorizontalAlignment="Left" Height="20" Grid.Row="0" Template="{StaticResource PreviousButtonTemplate}" Width="28"/>
<Button x:Name="PART_HeaderButton" Grid.Column="1" FontWeight="Bold" Focusable="False" FontSize="10.5" HorizontalAlignment="Center" Grid.Row="0" Template="{StaticResource HeaderButtonTemplate}" Height="100" VerticalAlignment="Center"/>
<Button x:Name="PART_NextButton" Grid.Column="2" Focusable="False" HorizontalAlignment="Right" Height="20" Grid.Row="0" Template="{StaticResource NextButtonTemplate}" Width="28"/>
<Grid x:Name="PART_MonthView" Grid.ColumnSpan="3" HorizontalAlignment="Center" Margin="6,-1,6,6" Grid.Row="1" Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
<Grid x:Name="PART_YearView" Grid.ColumnSpan="3" HorizontalAlignment="Center" Margin="6,-3,7,6" Grid.Row="1" Visibility="Hidden">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
</Grid>
</Border>
</Border>
<Rectangle x:Name="PART_DisabledVisual" Fill="{StaticResource DisabledColor}" Opacity="0" RadiusY="2" RadiusX="2" Stretch="Fill" Stroke="{StaticResource DisabledColor}" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Visibility" TargetName="PART_DisabledVisual" Value="Visible"/>
</Trigger>
<DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}}" Value="Year">
<Setter Property="Visibility" TargetName="PART_MonthView" Value="Hidden"/>
<Setter Property="Visibility" TargetName="PART_YearView" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}}" Value="Decade">
<Setter Property="Visibility" TargetName="PART_MonthView" Value="Hidden"/>
<Setter Property="Visibility" TargetName="PART_YearView" Value="Visible"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Try This.
Step 1 :
Create a Style for a Calender
<Style x:Key="styleCalendar" TargetType="{x:Type Calendar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Calendar}">
<!-- Wrapping in ViewBox will enlarge calendar of that size.-->
<Viewbox Height="400"
Width="400">
<CalendarItem x:Name="CalendarItem"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
Step 2 :
Apply Style for your DatePicker.
<DatePicker CalendarStyle="{StaticResource styleCalendar}"
Height="25" HorizontalAlignment="Left" Name="datePicker1" Width="120" />

Expandable ListViewItem

I'm working on a Universal Windows Application where I have a ListView with a DataTemplate.
I want to make the ListView expandable, when I click (Select) an Item, the selected Item's height would increase with animation. I tried using StoryBoard for that mission but I failed .
I also found this answer and It did what I want but without animation.
This is the ListView :
<ListView Name="lstviewMyMissions" HorizontalAlignment="Center" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ItemTemplate="{StaticResource MinimzedTemplate}" IsItemClickEnabled="False" ItemClick="lstviewMyMissions_ItemClick" SelectionMode="Single" SelectionChanged="lstviewMyMissions_SelectionChanged" Visibility="Visible">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="myback" Background="Transparent">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
and this is the DataTemplate :
<DataTemplate x:Key="MinimzedTemplate">
<Border Name="tstBorder" BorderThickness="1" Width="380" Height="100" CornerRadius="10" Background="White" FlowDirection="RightToLeft">
<Grid Height="100">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Right" Text="{Binding TaskDate}" Style="{StaticResource TextFontFamily}"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="1" Source="/Design/Phone/mo3amla_da5leya_icon.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<StackPanel Orientation="Vertical" Grid.Column="3" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Number" Style="{StaticResource TextFontFamily}"/>
<StackPanel Width="15"/>
<TextBlock Text="{Binding TaskNo}" Style="{StaticResource TextFontFamily}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Type" Style="{StaticResource TextFontFamily}"/>
<TextBlock Text="{Binding procedureType}" Style="{StaticResource TextFontFamily}"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Border>
</DataTemplate>
The question is : how can I Increase the ListViewItem's height with animation when the user clicks it ?

Just use visual state manager and set up appropriate states. I managed to achieve this with the following pieces of code:
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Rect"
Storyboard.TargetProperty="Height">
<EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="50">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Rect"
Storyboard.TargetProperty="Height">
<EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="25">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Rect"
Height="25"
Background="Transparent"
BorderBrush="Red"
BorderThickness="1">
<ContentPresenter x:Name="contentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hope this helps.
Best Regards,
Nazar

How to fullfile text mask in textbox

I am using infragistics controls for masked input. I created my own masked input for IP address and inherent class from XamMaskedInput.
The inherited class looks like:
public class IpMaskedTextBox : XamMaskedInput
{
BrushConverter bc = new BrushConverter();
public IpMaskedTextBox() : base()
{
Background = (Brush) bc.ConvertFrom("#F0FAFF");
BorderThickness = new Thickness(0);
BorderBrush = null;
Padding = new Thickness(5,0,5,0);
FontWeight = FontWeights.Bold;
VerticalContentAlignment = VerticalAlignment.Center;
HorizontalContentAlignment = HorizontalAlignment.Center;
}
// Prevent space character
protected override void OnPreviewKeyDown(System.Windows.Input.KeyEventArgs e)
{
base.OnPreviewKeyDown(e);
switch (e.Key)
{
case Key.Right:
e.Handled = true;
break;
case Key.Left:
e.Handled = true;
break;
}
}
}
and the appearance on xaml:
My question is, how can I full fill the prompt char on whole scope from textbox, that does not have free spaces on right and left.
Here the link to infragistics xamMaskedInput API.
Update:
The result should be like this:
Update 2:
Finally i found the style:
<Style x:Key="MaskedInputStyle" TargetType="igEditors:XamMaskedInput">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="igPrim:XamlHelper.SnapsToDevicePixels" Value="True" />
<Setter Property="SpinButtonStyle" Value="{StaticResource spinButtonStyle}" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="2"></Setter>
<Setter Property="BorderBrush" Value="{StaticResource SilverlightDarkBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="igEditors:XamMaskedInput">
<igPrim:ValidationDecorator x:Name="MainBorder">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_InputTextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
<VisualState x:Name="ReadOnly"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- SSP 10/11/11 TFS91203 - Moved this border to surround the text box below. This is
to fix an issue where if the border thickness is set to a large value, the borders cover the contents. -->
<!--<Border x:Name="BgBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="1" Visibility="Visible" CornerRadius="2" Margin="0"/>
<Border x:Name="OverBorder" BorderThickness="1" CornerRadius="1" Opacity="0" Margin="1" BorderBrush="{StaticResource FocusBorderFillKey}" Grid.ColumnSpan="2"/>-->
<!-- SSP 10/11/11 TFS91203 - Moved this here from above. See comments above. -->
<Border x:Name="BgBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="1" Visibility="Visible" CornerRadius="2" Margin="0">
<!-- SSP 10/11/11 TFS91426 - Changed the VerticalAlignment from Center to Stretch so the
VerticalContentAlignment takes effect.
-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- SSP 10/11/11 TFS91426 - Changed the VerticalAlignment from Center to Stretch so the
VerticalContentAlignment takes effect.
-->
<!-- SSP 7/11/13 TFS128674 - Added IsInputMethodEnabled binding -->
<Grid>
<igEditorsPrim:MaskedInputTextBox
x:Name="PART_InputTextBox"
Style="{StaticResource maskedInputTextBoxStyle}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
TextAlignment="{Binding HorizontalContentAlignment, Converter={StaticResource horizToTextAlignmentConverter}, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
Foreground="{TemplateBinding Foreground}"
InputMethod.IsInputMethodEnabled="{TemplateBinding InputMethod.IsInputMethodEnabled}"
InputMethod.PreferredImeState="{TemplateBinding InputMethod.PreferredImeState}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Stretch"
igPrim:XamlHelper.Focusable="{TemplateBinding igPrim:XamlHelper.Focusable}"
IsTabStop="{TemplateBinding IsTabStop}"
/>
<Border x:Name="OverBorder" BorderThickness="1" CornerRadius="1" Opacity="0" BorderBrush="{StaticResource FocusBorderFillKey}" Grid.ColumnSpan="2"/>
</Grid>
<Grid x:Name="PART_SpinButtons" Grid.Column="1" Visibility="{TemplateBinding SpinButtonVisibilityResolved}" Margin="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="1"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RepeatButton x:Name="spinUp" Style="{TemplateBinding SpinButtonStyle}" ContentTemplate="{StaticResource IncreaseGlyphKey}" >
<ig:Commanding.Command>
<igEditorsPrim:MaskedInputCommandSource EventName="Click" CommandId="SpinUp" />
</ig:Commanding.Command>
</RepeatButton>
<RepeatButton x:Name="spinDown" Style="{TemplateBinding SpinButtonStyle}" Grid.Row="2" ContentTemplate="{StaticResource DecreaseGlyphKey}">
<ig:Commanding.Command>
<igEditorsPrim:MaskedInputCommandSource EventName="Click" CommandId="SpinDown" />
</ig:Commanding.Command>
</RepeatButton>
</Grid>
</Grid>
</Border>
</Grid>
</igPrim:ValidationDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>