Tuesday 23 April 2013

Xaml Header Template

An example of a header template used in a tab control, it’s toward the bottom of this code:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:Primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls"
x:Class="ModernTabControl.MainPage">
<UserControl.Resources>
<Style TargetType="sdk:TabItem">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Background" Value="#FFFAFAFA"/>
<Setter Property="BorderBrush" Value="#FFEEEEEE"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="6,2,6,2"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Width" Value="90"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:TabItem">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HeaderLeftUnselected" Storyboard.TargetProperty="Opacity" From="0.4" To="1" Duration="0:0:0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="TemplateLeftSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="2,2,0,2" Background="{TemplateBinding Background}" CornerRadius="6,0,0,6" Margin="-2,-2,0,-2">
<Border BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="2,2,0,2">
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0, -2, -4, -2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<ContentControl x:Name="HeaderLeftSelected"
Cursor="{TemplateBinding Cursor}"
Foreground="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
HorizontalAlignment="Stretch"
IsTabStop="False"
VerticalAlignment="Stretch"/>
</Grid>
</Border>
</Border>
<Border x:Name="FocusVisualLeft" BorderBrush="#FF6DBDD1" BorderThickness="1,1,0,1" CornerRadius="3,0,0,3" IsHitTestVisible="false" Margin="-2,-2,0,-2" Visibility="Collapsed"/>
<Border x:Name="DisabledVisualLeftSelected" Background="#8CFFFFFF" CornerRadius="3,0,0,3" IsHitTestVisible="false" Margin="-2,-2,0,-2" Opacity="0"/>
</Grid>
<Grid x:Name="TemplateLeftUnselected" Visibility="Collapsed">
<Grid x:Name="GradientLeft">
<ContentControl x:Name="HeaderLeftUnselected"
Cursor="{TemplateBinding Cursor}"
Foreground="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
Opacity="0.4"
HorizontalAlignment="Stretch"
IsTabStop="False"
VerticalAlignment="Stretch"/>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="sdk:TabControl">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Background" Value="#FFFFFFFF" />
<Setter Property="BorderBrush" Value="#FFEEEEEE" />
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:TabControl">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualLeft">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="TemplateLeft" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Primitives:TabPanel x:Name="TabPanelLeft" Margin="2,2,-1,2" Canvas.ZIndex="1"/>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" CornerRadius="0,3,3,0" MinWidth="10" MinHeight="10">
<ContentPresenter x:Name="ContentLeft" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Border>
<Border x:Name="DisabledVisualLeft" Background="#8CFFFFFF" Grid.Column="1" CornerRadius="0,3,3,0" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="13" />
</Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="#FFFAFAFA">
<sdk:TabControl HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
TabStripPlacement="Left"
Margin="20"
SelectedItem="{Binding SelectedProductGroup}">
<sdk:TabControl.Resources>
<DataTemplate x:Key="TabHeaderTemplate">
<Grid>
<Rectangle Fill="#00FFFFFF" Width="135" Height="70"/>
<TextBlock Text="{Binding .}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</DataTemplate>
</sdk:TabControl.Resources>
<sdk:TabItem HeaderTemplate="{StaticResource TabHeaderTemplate}" Header="Overview">
</sdk:TabItem>
<sdk:TabItem HeaderTemplate="{StaticResource TabHeaderTemplate}" Header="Equities">
</sdk:TabItem>
<sdk:TabItem HeaderTemplate="{StaticResource TabHeaderTemplate}" Header="FX">
</sdk:TabItem>
<sdk:TabItem HeaderTemplate="{StaticResource TabHeaderTemplate}" Header="FX Flow">
</sdk:TabItem>
</sdk:TabControl>
</Grid>
</UserControl>

Source:  https://github.com/stevenh77/ModernTabControl/

Tuesday 2 April 2013

Slow Silverlight debugging

If you’ve added a Xaml binding breakpoint and now have really slow performance when debugging, like your app being slow to load, animations not running smoothly etc then try this…

  1. Remove all xaml breakpoints
  2. Add System.Windows.Data.Binding.IsDebuggingEnabled = false within the App.xaml.cs constructor.

image

Run it once then you can remove the line, hope this helps some peeps out!