Silverlight Childwindow + Implicit Style not working - silverlight-4.0

Using Silverlight 4, we can't seem to get Childwindows' to show our implicit styles. Every other control on our app takes the implicit styles but the childwindow (even the controls on the childwindow take their implicit styles)
(we are using the toolkit styles)
<!--ChildWindow-->
<Style TargetType="controls:ChildWindow">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="TabNavigation" Value="Cycle"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="BorderThickness" Value="1"/>
<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="OverlayBrush" Value="#7F000000"/>
<Setter Property="OverlayOpacity" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:ChildWindow">
<Grid x:Name="Root">
<Grid.Resources>
<Style x:Key="CloseButtonStyle" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<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="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" Height="14" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Background="#02FFFFFF">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.95"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.85"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="X_Fuzz2" Fill="#14C51900" Stretch="Fill" Stroke="#14C51900" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.3" ScaleY="1.3"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path x:Name="X_Fuzz1" Fill="#1EC51900" Stretch="Fill" Stroke="#1EC51900" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path x:Name="X_Fuzz0" Fill="#FFC51900" Stretch="Fill" Stroke="#FFC51900" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="1" Visibility="Collapsed" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z"/>
<Path x:Name="X" Fill="#FFFFFFFF" Stretch="Fill" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="0.7" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF313131" Offset="1"/>
<GradientStop Color="#FF8E9092" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="Open">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
<SplineDoubleKeyFrame KeySpline="0,0,0.5,1" KeyTime="00:00:00.45" Value="1.05"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
<SplineDoubleKeyFrame KeySpline="0,0,0.5,1" KeyTime="00:00:00.45" Value="1.05"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Closed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Overlay" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Top" Opacity="{TemplateBinding OverlayOpacity}" Background="{TemplateBinding OverlayBrush}"/>
<Grid x:Name="ContentRoot" Height="{TemplateBinding Height}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Width="{TemplateBinding Width}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Border HorizontalAlignment="Stretch" Margin="-1" VerticalAlignment="Stretch" Background="#14000000" BorderBrush="#14000000" BorderThickness="1" CornerRadius="2"/>
<Border HorizontalAlignment="Stretch" Margin="-2" VerticalAlignment="Stretch" Background="#0F000000" BorderBrush="#0F000000" BorderThickness="1" CornerRadius="2.25"/>
<Border HorizontalAlignment="Stretch" Margin="-3" VerticalAlignment="Stretch" Background="#0C000000" BorderBrush="#0C000000" BorderThickness="1" CornerRadius="2.5"/>
<Border HorizontalAlignment="Stretch" Margin="-4" VerticalAlignment="Stretch" Background="#0A000000" BorderBrush="#0A000000" BorderThickness="1" CornerRadius="2.75"/>
<Border BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
<Border.Background>
<SolidColorBrush Color="#FF262626"/>
</Border.Background>
<Border Margin="1" CornerRadius="1.5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{StaticResource ExpressionBottomGradientBrush2}" Offset="1"/>
<GradientStop Color="{StaticResource ExpressionBottomGradientBrush4}" Offset="0"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border x:Name="Chrome" Width="Auto" BorderThickness="0,0,0,1">
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource ExpressionBottomGradientBrush1}"/>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.527999997138977" StartPoint="0.5,0">
<GradientStop Color="{StaticResource ExpressionBottomGradientBrush1}" Offset="1"/>
<GradientStop Color="{StaticResource ExpressionBottomGradientBrush2}" Offset="0"/>
<GradientStop Color="{StaticResource ExpressionBottomGradientBrush2}" Offset="0.356"/>
</LinearGradientBrush>
</Border.Background>
<Grid Height="Auto" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<ContentControl FontWeight="Bold" IsTabStop="False" HorizontalAlignment="Stretch" Margin="6,0,6,0" VerticalAlignment="Center" Content="{TemplateBinding Title}">
<ContentControl.Foreground>
<SolidColorBrush Color="{StaticResource TextColor}"/>
</ContentControl.Foreground>
</ContentControl>
<Button x:Name="CloseButton" IsTabStop="False" Height="14" HorizontalAlignment="Center" Style="{StaticResource CloseButtonStyle}" VerticalAlignment="Center" Width="15" Grid.Column="1"/>
</Grid>
</Border>
<Border Margin="7" Grid.Row="1" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
.. And here is the xaml being used.
<controls:ChildWindow x:Class="CommonModule.Views.OptionsWindowView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:commands="clr-namespace:Microsoft.Practices.Prism.Commands;assembly=Microsoft.Practices.Prism"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:regions="clr-namespace:Microsoft.Practices.Prism.Regions;assembly=Microsoft.Practices.Prism"
Width="400" Height="300"
Title="Options"
HasCloseButton="False">
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<controls:TabControl BorderThickness="5"
x:Name="OptionsTabRegion"
regions:RegionManager.RegionName="OptionsTabRegion">
<regions:TabControlRegionAdapter.ItemContainerStyle>
<Style BasedOn="{StaticResource TabItemStyle}" TargetType="controls:TabItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</regions:TabControlRegionAdapter.ItemContainerStyle>
</controls:TabControl>
<Button x:Name="CancelButton" Content="Cancel" commands:Click.Command="{Binding CancelCommand}" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1"/>
<Button x:Name="OKButton" Content="OK" commands:Click.Command="{Binding OkCommand}" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
</Grid>

This would appear to be an issue with Silverlight 4 in that the default style key is not set to the typeof(ChildWindow).
Either inherit your own class from "ChildWindow" and in the constructor set the following:
DefaultStyleKey = typeof(MyChildWindow);
Or alternatively use an explicit style by creating a "key" and applying that style key on the childwindow control.

Color="{StaticResource ExpressionBottomGradientBrush2}"
please note that if ExpressionBottomGradientBrush2 is defined as a System.Windows.Media.SolidColorBrush, you can't set it to System.Windows.Media.Color.
If you have any errors in your child window's style, it just won't apply, I guess that's the reason you can't see it. :)

Related

UWP Slider ToolTip Style Issue

My tooltip looks normal at first, then a couple seconds later has a white border. The image has a transparent background. Just wondering how to make this go away?
Class definition:
using System;
using Windows.UI.Xaml;
using SynaAudio.Core;
namespace TestProject.Client.MixerPage
{
/// <summary>
/// Interaction logic for MasterSettingsHandler.xaml
/// </summary>
public partial class MasterSettingsHandler
{
public MasterSettingsHandler()
{
try
{
InitializeComponent();
}
catch (Exception e)
{
}
}
}
}
xaml code:
<Page x:Class="TestProject.Client.MixerPage.MasterSettingsHandler"
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" Width="660" Height="50" >
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///TestProject/Resources/Templates/Slider.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<Border Name="bdrMas" Background="#FF262626">
<Grid Name="gridMas" Margin="10,0,10,0" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<TextBlock Name="_endPointLabel"
Text="Master Volume"
FontSize="13" Margin="10,0"
HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="#FFDADADA"
TextAlignment="Center" TextTrimming="WordEllipsis" TextWrapping="Wrap" />
<Slider Name="_volumeSlider" x:FieldModifier="public"
Style="{StaticResource SaSlider}"
Value="{Binding Path=Volume, Mode=TwoWay}"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Grid.Column="2"
LargeChange="1" SmallChange="1"
Orientation="Horizontal" />
</Grid>
</Border>
</Page>
Slider Style:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Style x:Key="SaSlider" TargetType="Slider" >
<Setter Property="Template" Value="{StaticResource FancySliderControlTemplate}" />
</Style>
<ControlTemplate x:Key="FancySliderControlTemplate" TargetType="Slider">
<Grid x:Name="RootGrid" Margin="{TemplateBinding Padding}">
<Grid.Resources>
<Style TargetType="Thumb" x:Key="SliderThumbStyle">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="#FF36A4F1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border x:Name="bdrThumb" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0"
CornerRadius="7" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.9" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.9" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.9" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="16" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="16" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.8" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.8" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.8" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.8" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="16" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="16" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusEngagementStates">
<VisualState x:Name="FocusDisengaged" />
<VisualState x:Name="FocusEngagedHorizontal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
<DiscreteObjectKeyFrame KeyTime="0" Value="False" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
<DiscreteObjectKeyFrame KeyTime="0" Value="True" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="HeaderContentPresenter"
x:DeferLoadStrategy="Lazy"
Visibility="Collapsed"
Foreground="{ThemeResource SliderHeaderForeground}"
Margin="{ThemeResource SliderHeaderThemeMargin}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontWeight="{ThemeResource SliderHeaderThemeFontWeight}"
TextWrapping="Wrap" />
<Grid x:Name="SliderContainer"
Background="{ThemeResource SliderContainerBackground}"
Grid.Row="1"
Control.IsTemplateFocusTarget="True">
<Grid x:Name="HorizontalTemplate" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="6" />
<RowDefinition Height="Auto" />
<RowDefinition Height="6" />
</Grid.RowDefinitions>
<Rectangle x:Name="HorizontalTrackRect"
Fill="#FF3D3D3D"
Height="5"
Grid.Row="1"
Grid.ColumnSpan="3" />
<Rectangle x:Name="HorizontalDecreaseRect" Grid.Row="1" Grid.Column="2" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#FF16486C" Offset="0.0" />
<GradientStop Color="#FF36A4F1" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TickBar x:Name="TopTickBar"
Visibility="Collapsed"
Fill="{ThemeResource SliderTickBarFill}"
Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
VerticalAlignment="Bottom"
Margin="0,0,0,4"
Grid.ColumnSpan="3" />
<TickBar x:Name="HorizontalInlineTickBar"
Visibility="Collapsed"
Fill="{ThemeResource SliderInlineTickBarFill}"
Height="{ThemeResource SliderTrackThemeHeight}"
Grid.Row="1"
Grid.ColumnSpan="3" />
<TickBar x:Name="BottomTickBar"
Visibility="Collapsed"
Fill="{ThemeResource SliderTickBarFill}"
Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
VerticalAlignment="Top"
Margin="0,4,0,0"
Grid.Row="2"
Grid.ColumnSpan="3" />
<Thumb x:Name="HorizontalThumb"
Style="{StaticResource SliderThumbStyle}"
DataContext="{TemplateBinding Value}"
Height="14"
Width="14"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="1"
AutomationProperties.AccessibilityView="Raw" >
<ToolTipService.ToolTip>
<ToolTip>
<ToolTip.Style>
<Style TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<ContentPresenter
x:Name="LayoutRoot"
Foreground="White"
Background="Transparent"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OpenStates">
<VisualState x:Name="Closed">
<Storyboard>
<FadeOutThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Opened">
<Storyboard>
<FadeInThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToolTip.Style>
<Grid Background="Transparent">
<Image Source="ms-appx:///SmartAudioSkinHP2020/Resources/Images/Misc/Tooltip.png" Stretch="Fill" />
<TextBlock Text="{TemplateBinding Value}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ToolTip>
</ToolTipService.ToolTip>
</Thumb>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</ResourceDictionary>
Target version: Windows 10 1803 17134
It appears the normal thumb tooltip is displayed a few seconds after mine. I assume this needs to be fixed in the slider style.
Would be working on other tasks if this were WPF :(
I can reproduce this issue by using your code in project's target version(17134/17763). If I switch target version to Windows 10 1903(18362), I did not face this issue. So, this issue has been fixed in the latest 18362. Please try it.

Windows phone WinRT Pivot remove header and title space

I want to remove the space the title and headers normaly occupy inside a Pivot when using Winrt toolkit with Windows phone 8.1 so the content of the Pivotitem is filling the screen.
here is what i tried:
<Page.Resources>
<Thickness x:Key="PivotPortraitThemePadding">19,0,0,0</Thickness>
<Thickness x:Key="PivotLandscapeThemePadding">19,25,0,0</Thickness>
<Style x:Key="CustomPivotStyle" TargetType="Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Pivot Style="{StaticResource CustomPivotStyle}">
<Pivot.HeaderTemplate>
<DataTemplate/>
</Pivot.HeaderTemplate>
<Pivot.TitleTemplate>
<DataTemplate/>
</Pivot.TitleTemplate>
<PivotItem>
<TextBlock Text="text1" FontSize="100"/>
</PivotItem>
<PivotItem>
<TextBlock Text="text2" FontSize="100"/>
</PivotItem>
</Pivot>
that didnt work. Is there an alternative way off doing it or am I just doing it wrong?
Just setting the top margin to a negative value is not an option for me
[edit]: The tip fex gave me seems to also work using a flipview is possible too!
<FlipView>
<FlipViewItem>
<TextBlock Text="text1" FontSize="100"/>
</FlipViewItem>
<FlipViewItem>
<TextBlock Text="text2" FontSize="100"/>
</FlipViewItem>
</FlipView>
solved it with the link Romasz provided i set PivotPortraitThemePadding to 0 and then manipulated the margin of the item inside the pivotitem to make it sit flush with the top.
<Page.Resources>
<Thickness x:Key="PivotPortraitThemePadding">19,0,0,0</Thickness>
<Thickness x:Key="PivotLandscapeThemePadding">19,25,0,0</Thickness>
<Style x:Key="CustomPivotStyle" TargetType="Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Pivot Style="{StaticResource CustomPivotStyle}">
<PivotItem>
<TextBlock Text="text1" FontSize="100" Foreground="White" Margin="0,-20,0,0"/>
</PivotItem>
<PivotItem>
<ScrollViewer>
<TextBlock Text="text2" FontSize="100" Margin="0,-20,0,0"/>
</ScrollViewer>
</PivotItem>
</Pivot>

Silverlight DataVisualization Charting Gradient on StackedBarSeries

I am using the Silverlight charting control: System.Windows.Controls.DataVisualization.Charting and I wish to remove the gradient that is on the bar where the color is solid at the bottom and gets lighter towards the top, so what I am looking for is a solid bar and not with a gradient.
I have managed to get the original style from Blend for the chart control and added the following to my own style:
<Setter Property="PlotAreaStyle">
<Setter.Value>
<Style TargetType="Grid">
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Transparent"/>
<GradientStop Color="Black" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
Can someone please help me as I am new to Silverlight and have spent many hours trying to find a solution, I am using this site as a last resort.
This is the code I am using for the chart control.
<charting:Chart Loaded="Loaded" Width="{Binding ElementName=Graph, Path=GraphWidth}" Grid.Column="0" BorderBrush="Transparent" x:Name="SummaryGraph"
Style="{StaticResource SummaryGraphStyle}"
VerticalAlignment="Stretch" HorizontalAlignment="Center">
<charting:ColumnSeries>
<charting:ColumnSeries.DataPointStyle>
<Style TargetType="charting:ColumnDataPoint">
<Setter Property="Background" Value="Black" />
</Style>
</charting:ColumnSeries.DataPointStyle>
</charting:ColumnSeries>
<charting:Chart.Axes>
<DataVisualization:LinearAxisWithAxisLine AxisLabelStyle="{StaticResource YAxisLabel}" FontStyle="Normal" FontWeight="Bold" Title="{Binding ElementName=Graph, Path=YAxisTitle}" Orientation="Y" />
<charting:CategoryAxis AxisLabelStyle="{StaticResource XAxisLabel}" FontSize="{Binding ElementName=Graph, Path=XAxisLabelFontSize}" BorderThickness="0" Background="Transparent" Orientation="X" />
</charting:Chart.Axes>
</charting:Chart>
Many Thanks,
I am now using this code with the style provided:
<charting:Chart Loaded="Loaded" Width="{Binding ElementName=Graph, Path=GraphWidth}" Grid.Column="0" BorderBrush="Transparent" x:Name="SummaryGraph"
Style="{StaticResource SummaryGraphStyle}"
VerticalAlignment="Stretch" HorizontalAlignment="Center">
<!--<charting:ColumnSeries DataPointStyle="{StaticResource ColumnDataPointNoGradientStyle}" />
<charting:ColumnSeries>
<charting:ColumnDataPoint Style="{StaticResource ColumnDataPointNoGradientStyle}"></charting:ColumnDataPoint>
</charting:ColumnSeries>-->
<charting:StackedColumnSeries>
<charting:SeriesDefinition DataPointStyle="{StaticResource ColumnDataPointNoGradientStyle}"/>
</charting:StackedColumnSeries>
<charting:Chart.Axes>
<DataVisualization:LinearAxisWithAxisLine AxisLabelStyle="{StaticResource YAxisLabel}" FontStyle="Normal" FontWeight="Bold" Title="{Binding ElementName=Graph, Path=YAxisTitle}" Orientation="Y" />
<charting:CategoryAxis AxisLabelStyle="{StaticResource XAxisLabel}" FontSize="{Binding ElementName=Graph, Path=XAxisLabelFontSize}" BorderThickness="0" Background="Transparent" Orientation="X" >
</charting:CategoryAxis>
</charting:Chart.Axes>
</charting:Chart>
You need to modify the DataPointStyle Background on the ColumnSeries. Try setting the style directly into the StackedColumnSeries
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
<toolkit:Chart>
<toolkit:ColumnSeries Title="{Binding ...}" ItemsSource="{Binding ...}" IndependentValuePath="..." DependentValuePath="...">
<toolkit:ColumnSeries.DataPointStyle>
<Style x:Key="ColumnDataPointNoGradientStyle" TargetType="toolkit:ColumnDataPoint">
<Setter Property="Background" Value="Orange"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ColumnDataPoint">
<Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
<ToolTipService.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
</ToolTipService.ToolTip>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverHighlight"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionHighlight"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="{TemplateBinding Background}">
<Rectangle Visibility="Collapsed">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#77ffffff" Offset="0"/>
<GradientStop Color="#00ffffff" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border BorderBrush="#ccffffff" BorderThickness="1" Visibility="Collapsed">
<Border BorderBrush="#77ffffff" BorderThickness="1"/>
</Border>
<Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
<Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:ColumnSeries.DataPointStyle>
</toolkit:ColumnSeries>
<toolkit:Chart>
Here is the full DataPointStyle. The only modification is adding a visibility collapsed to the gradient rectangle: <Rectangle Visibility="Collapsed"> (located near the bottom)

Individual ItemSize for LoopingSelectorItem

I am trying to use LoopingSelector from Windows phone toolkit.
The selector itself works fine but I'm having problems with the ItemSize on the individual items.
I dont have a single item that is the same size as the other so I would like to get every single item to only take the necessary space on the screen.
But I have been unable to get this behavior. Anyone have any feedback? I have attached the code in the bottom. I must miss something obvious here.
<Style TargetType="toolkitPrimitives:LoopingSelectorItem">
<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
<Setter Property="Padding" Value="6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="root" CacheMode="BitmapCache" Background="Transparent" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" To="Expanded" GeneratedDuration="0:0:0.33" />
<VisualTransition From="Expanded" To="Normal" GeneratedDuration="0:0:0.33" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Text" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkGray" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentControl" Storyboard.TargetProperty="Foreground" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentControl" Storyboard.TargetProperty="FontWeight" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="Bold" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.RenderTransform>
<TranslateTransform x:Name="Transform"/>
</Border.RenderTransform>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle x:Name="background" Margin="0" Opacity="0" Fill="{StaticResource PhoneAccentBrush}" CacheMode="BitmapCache"/>
<Border x:Name="border" Opacity="0" BorderThickness="0" BorderBrush="{StaticResource PhoneSubtleBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ContentControl x:Name="contentControl" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<TextBlock x:Name="Text" TextWrapping="Wrap" Opacity="0.7" Text="{Binding Text}" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ContentControl>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<toolkitPrimitives:LoopingSelector x:Name="LoopingSelector" ItemMargin="10" ItemSize="430,120" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
I see that several VerticalAlignment values are set to "stretch". This will stretch the element vertically until it fills its parent. Try setting the Height property of those elements to "auto". The VerticalAlignment values should be either removed or set to anything but "stretch". Same goes for Width and HorizontalAlignment.
<Border.RenderTransform>
<TranslateTransform x:Name="Transform"/>
</Border.RenderTransform>
<Grid HorizontalAlignment="Stretch" Height="auto">
<Rectangle x:Name="background" Margin="0" Opacity="0" Fill="{StaticResource PhoneAccentBrush}" CacheMode="BitmapCache"/>
<Border x:Name="border" Opacity="0" BorderThickness="0" BorderBrush="{StaticResource PhoneSubtleBrush}" Height="auto" HorizontalAlignment="Stretch">
<ContentControl x:Name="contentControl" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Height="auto" VerticalContentAlignment="Stretch">
<TextBlock x:Name="Text" TextWrapping="Wrap" Opacity="0.7" Text="{Binding Text}" Foreground="{StaticResource PhoneForegroundBrush}" Height="auto" HorizontalAlignment="Stretch" />
</ContentControl>
</Border>
</Grid>

Style Scrollviewer for Windows 8 App (color, height, etc)

I have a windows 8 app that displays stack panels in a horizontal scroll viewer. I have created a style to be applied to the scroll viewer and I want to target the scroll bar height, foreground and background bar colors, the arrows, etc. But I can't seem to access those properties. Any information would be appreciated.
<Style x:Key="HorizontalScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
</Style>
You can create your own scroll bar style based on the default style located here:
http://msdn.microsoft.com/library/windows/apps/jj710190.aspx
Try this template
<Style TargetType="ScrollBar">
<Setter Property="MinWidth" Value="17" />
<Setter Property="MinHeight" Value="17" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid x:Name="Root">
<Grid.Resources>
<!--************************RepeatButton***********************************************-->
<ControlTemplate x:Key="RepeatButtonTemplate" TargetType="RepeatButton">
<Border x:Name="Root" Background="Transparent"></Border>
</ControlTemplate>
<!--*************************************************************************************-->
<!--************************Increment and decrement RepeatButton***********************************************-->
<!-- Visit Charmap for different arrow shapes-->
<ControlTemplate x:Key="HorizontalIncrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root" Height="9" Width="9">
<TextBlock x:Name="BackgroundPressed" FontFamily="Segoe UI Symbol" Foreground="DarkGray" Text="▶" FontSize="8" Opacity="1" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="HorizontalDecrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root" Height="9" Width="9">
<TextBlock x:Name="BackgroundPointerOver" FontFamily="Segoe UI Symbol" Foreground="Gray" Text="◀" FontSize="8" Opacity="1" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</ControlTemplate>
<!--******************************************************************************-->
<!--************************thumb************************************************************-->
<ControlTemplate x:Key="HorizontalThumbTemplate" TargetType="Thumb">
<Border x:Name="Background" Background="LightGray" BorderBrush="DarkGray" BorderThickness="1" />
</ControlTemplate>
<!--*********************************************************************************************-->
</Grid.Resources>
<!--here u can define height and width for scrollbar-->
<Grid x:Name="HorizontalRoot" IsHitTestVisible="False" Height="17" Margin="0,-3,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="5" Margin="0" StrokeThickness="0.5" Fill="White" Stroke="DarkGray" />
<RepeatButton x:Name="HorizontalSmallDecrease" Width="15" Grid.Column="0" IsTabStop="False" Interval="50" Template="{StaticResource HorizontalDecrementTemplate}" VerticalAlignment="Center" />
<RepeatButton x:Name="HorizontalLargeDecrease" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" Interval="50" Template="{StaticResource RepeatButtonTemplate}" Width="0" />
<Thumb x:Name="HorizontalThumb" Grid.Column="2" MinWidth="48" Height="15" Template="{StaticResource HorizontalThumbTemplate}" Margin="2" />
<RepeatButton x:Name="HorizontalLargeIncrease" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" Interval="50" Template="{StaticResource RepeatButtonTemplate}" />
<RepeatButton x:Name="HorizontalSmallIncrease" Width="15" Grid.Column="4" IsTabStop="False" Interval="50" Template="{StaticResource HorizontalIncrementTemplate}" VerticalAlignment="Center" />
</Grid>
<Grid x:Name="HorizontalPanningRoot" HorizontalAlignment="Left" MinWidth="66">
<Border x:Name="HorizontalPanningThumb" Background="Transparent" MinWidth="15" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
</VisualStateGroup>
<VisualStateGroup x:Name="ScrollingIndicatorStates">
<VisualState x:Name="TouchIndicator">
<Storyboard>
<FadeInThemeAnimation TargetName="HorizontalPanningRoot" />
<FadeOutThemeAnimation TargetName="HorizontalRoot" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalRoot" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseIndicator">
<Storyboard>
<FadeInThemeAnimation TargetName="HorizontalRoot" />
<FadeOutThemeAnimation TargetName="HorizontalPanningRoot" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalPanningRoot" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="HorizontalRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Boolean>True</x:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation BeginTime="0" TargetName="HorizontalPanningRoot" />
<FadeOutThemeAnimation BeginTime="0" TargetName="HorizontalRoot" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and u can define pressed,pointerover behaviour for thumb and repeat button like this
<ControlTemplate x:Key="HorizontalIncrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root" Height="9" Width="9">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Right" VerticalAlignment="Center">
<TextBlock x:Name="BackgroundPointerOver" FontFamily="Segoe UI Symbol" Foreground="Gray" Text="▶" FontSize="8" Opacity="0" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock>
<TextBlock x:Name="BackgroundPressed" FontFamily="Segoe UI Symbol" Foreground="DarkGray" Text="▶" FontSize="8" Opacity="0" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock>
</Grid>
</Grid>
</ControlTemplate>