Expander in listview issue - xaml

I'm new here and I need help.
I have some problem regarding the display of screen that you will find in PJ. I would like to remove the blue when I fly the sub-menu trains lines by Mouse but I can not. Anyone could help me please?
Please find attached a screenshot about how he looks like and The XAML code belonging to it.
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<Style x:Key="MenuMaterialDesignExpanderHeaderToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="16,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ContentPresenter VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MenuMaterialDesignExpander" TargetType="{x:Type Expander}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
<Setter Property="TextBlock.FontWeight" Value="DemiBold" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" To="Expanded">
<VisualTransition.GeneratedEasingFunction>
<CubicEase EasingMode="EaseOut" />
</VisualTransition.GeneratedEasingFunction>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0" Value=".5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition GeneratedDuration="0" To="Collapsed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value=".5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value=".5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="NormalToggleButton"
Storyboard.TargetProperty="Opacity"
To=".25" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition MinHeight="25" />
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderThickness="0">
<Grid>
<ToggleButton x:Name="NormalToggleButton"
Grid.Column="1"
IsChecked="{Binding Path=IsExpanded,
Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource MenuMaterialDesignExpanderHeaderToggleButton}">
<ContentPresenter HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True" />
</ToggleButton>
</Grid>
</Border>
<Border Grid.Row="1">
<ContentPresenter Name="PART_Content" RenderTransformOrigin="0,0">
<ContentPresenter.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0" />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Width="300">
<StackPanel Grid.Row="0"
Margin="5"
Orientation="Vertical">
<!-- DatabaseSelection -->
<Button Margin="2"
HorizontalContentAlignment="Stretch"
Command="{Binding AddDatabaseSelectionTabItemCommand}"
ToolTip="{Binding ActivatedDatabaseTitleTooltip}">
<Button.CommandParameter>
<params:TabItemInfo Title="{lex:Loc DatabaseSelection}"
PackIcon="Database"
RegionName="DatabaseSelectionRegion"
Type="Unique" />
</Button.CommandParameter>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<materialDesign:PackIcon Grid.Column="0"
Width="22"
Height="22"
Margin="0,0,5,0"
Kind="Database" />
<TextBlock Grid.Column="1"
VerticalAlignment="Center"
FontSize="14"
FontWeight="Bold"
Text="{Binding ActivatedDatabaseType}" />
<TextBlock Grid.Column="2"
VerticalAlignment="Center"
FontSize="14"
Text=" - " />
<TextBlock Grid.Column="3"
VerticalAlignment="Center"
FontSize="14"
Text="{Binding ActivatedDatabaseTitle}" />
</Grid>
</Button>
<!-- Explorateur d'éléments -->
<Button Margin="2"
HorizontalContentAlignment="Left"
Command="{Binding AddTabItemCommand}"
Style="{StaticResource MaterialDesignFlatButton}">
<Button.CommandParameter>
<params:TabItemInfo Title="{lex:Loc ItemsExplorer}"
RegionName="ItemsExplorerRegion"
PackIcon="Sitemap"
Type="Unique" />
</Button.CommandParameter>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Width="22"
Height="22"
Margin="0,0,5,0"
Kind="Sitemap" />
<TextBlock VerticalAlignment="Center"
FontSize="14"
Text="{lex:Loc ItemsExplorer}" />
</StackPanel>
</Button>
<!-- Schéma principe -->
<ListView Margin="10,0,0,4"
Background="Transparent"
BorderThickness="0"
ItemsSource="{Binding RelecturesCollection}"
ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListView.ItemTemplate>
<DataTemplate>
<Button HorizontalContentAlignment="Left"
Command="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type local:MenuView}},
Path=DataContext.AddTabItemCommand,
Mode=OneTime}"
CommandParameter="{Binding TabItemInfo}"
Style="{StaticResource MaterialDesignFlatButton}">
<Grid Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
VerticalAlignment="Center"
FontSize="14"
FontWeight="Bold"
Foreground="{Binding TypeSchematique.Color}"
Text="{Binding TypeSchematique.Nom}" />
<TextBlock Grid.Column="1"
Margin="3,0"
VerticalAlignment="Center"
FontSize="14"
FontWeight="Normal"
Text="-" />
<TextBlock Grid.Column="2"
VerticalAlignment="Center"
FontSize="14"
FontWeight="Normal"
Text="{Binding Nom}"
TextTrimming="CharacterEllipsis"
ToolTip="{Binding Nom}" />
<TextBlock Grid.Column="3"
Margin="3,0,0,0"
VerticalAlignment="Center"
FontSize="14"
FontStyle="Italic"
FontWeight="Normal"
Text="{Binding Version}" />
</Grid>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- Outils -->
<Expander Margin="0,4"
HorizontalAlignment="Stretch"
IsEnabled="{Binding IsDatabaseActivated}"
IsExpanded="True"
Style="{StaticResource MenuMaterialDesignExpander}">
<Expander.Header>
<StackPanel Cursor="Hand" Orientation="Horizontal">
<materialDesign:PackIcon Width="22"
Height="22"
Margin="0,0,5,0"
Kind="Wrench" />
<TextBlock VerticalAlignment="Center"
FontSize="14"
Text="{lex:Loc Tools}" />
</StackPanel>
</Expander.Header>
<ListView Margin="10,0,0,0"
Background="Transparent"
BorderThickness="0">
<ListViewItem>
<Button HorizontalContentAlignment="Left"
Command="{Binding AddTabItemCommand}"
Style="{StaticResource MaterialDesignFlatButton}">
<Button.CommandParameter>
<params:TabItemInfo Title="{lex:Loc Components}"
RegionName="ComponentLibraryImportRegion"
PackIcon="Import"
Type="Unique" />
</Button.CommandParameter>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Width="22"
Height="22"
Margin="0,0,5,0"
Kind="Import" />
<TextBlock VerticalAlignment="Center"
FontSize="14"
Text="{lex:Loc Components}" />
</StackPanel>
</Button>
</ListViewItem>
<ListViewItem>
<Button HorizontalContentAlignment="Left"
Command="{Binding AddTabItemCommand}"
Style="{StaticResource MaterialDesignFlatButton}">
<Button.CommandParameter>
<params:TabItemInfo Title="{lex:Loc Associations}"
RegionName="ComponentLibraryAssociationRegion"
PackIcon="AutoFix"
Type="Unique" />
</Button.CommandParameter>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Width="22"
Height="22"
Margin="0,0,5,0"
Kind="AutoFix" />
<TextBlock VerticalAlignment="Center"
FontSize="14"
Text="{lex:Loc Associations}" />
</StackPanel>
</Button>
</ListViewItem>
<!--Creer un sous menu dans la View "Trains Vues"-->
<Expander Margin="0,4"
HorizontalAlignment="Stretch"
IsExpanded="True"
Style="{StaticResource MenuMaterialDesignExpander}">
<Expander.Header>
<StackPanel Cursor="Hand" Orientation="Horizontal" >
<materialDesign:PackIcon Width="22"
Height="22"
Margin="0,0,5,0"
Kind="Eye" />
<TextBlock VerticalAlignment="Center"
FontSize="14"
Text="{lex:Loc TrainsViews}" />
</StackPanel>
</Expander.Header>
<ListView Margin="10,0,0,0"
Background="Transparent"
BorderThickness="0">
<!--Sous Sous Menu Lignes Trains-->
<ListViewItem>
<Button HorizontalContentAlignment="Left"
Command="{Binding AddTabItemCommand}"
Style="{StaticResource MaterialDesignFlatButton}">
<Button.CommandParameter>
<params:TabItemInfo Title="{lex:Loc TrainsLines}"
RegionName="ComponentLibraryTrainLinesRegion"
PackIcon="Train"
Type="Unique" />
</Button.CommandParameter>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Width="22"
Height="22"
Margin="0,0,5,0"
Kind="Train" />
<TextBlock VerticalAlignment="Center"
FontSize="14"
Text="{lex:Loc Trainslines}" />
</StackPanel>
</Button>
</ListViewItem>
<!--Sous Sous Menu Options/Variantes-->
<ListViewItem>
<Button HorizontalContentAlignment="Left"
Command="{Binding AddTabItemCommand}"
Style="{StaticResource MaterialDesignFlatButton}">
<Button.CommandParameter>
<params:TabItemInfo Title="{lex:Loc OptionsVersions}"
RegionName="OptionsVersionsRegion"
PackIcon="Check"
Type="Unique" />
</Button.CommandParameter>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Width="22"
Height="22"
Margin="0,0,5,0"
Kind="Check" />
<TextBlock VerticalAlignment="Center"
FontSize="14"
Text="{lex:Loc OptionsVersions}" />
</StackPanel>
</Button>
</ListViewItem>
</ListView>
</Expander>
</ListView>
</Expander>
<ListView Margin="10,0,0,4"
Background="Transparent"
BorderThickness="0"
ItemsSource="{Binding CoherenceCollection}"
ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListView.ItemTemplate>
<DataTemplate>
<Button HorizontalContentAlignment="Left"
Command="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type local:MenuView}},
Path=DataContext.AddTabItemCommand,
Mode=OneTime}"
CommandParameter="{Binding TabItemInfo}"
Style="{StaticResource MaterialDesignFlatButton}">
<Grid Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
VerticalAlignment="Center"
FontSize="14"
FontWeight="Bold"
Text="{Binding Nom}" />
</Grid>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>

Related

Issues with styling a radio button in .Net MAUI

I am running into some issues with styling a radio button in .Net MAUI. Initially, I noticed the the radio button look-and-feel is not consistent across Windows and Android, as can be seen in the image below:
Not only are they different, but the available options for styling the button are limited. The only options for defining colors are "BorderColor", "BackgroundColor", and "TextColor". Both "BorderColor" and "BackgroundColor" have absolutely no effect on the color of the radio button itself. I'd like to change the color of the actual radio button.
So I decided to create a control template to help me out. Here is my control template:
<ControlTemplate x:Key="RadioButtonTemplate">
<Border Stroke="Transparent" BackgroundColor="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid WidthRequest="20" HeightRequest="20" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center">
<Ellipse x:Name="border_circle" StrokeThickness="2" Stroke="DarkBlue" Fill="White" WidthRequest="18" HeightRequest="18" HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check" Fill="DarkBlue" WidthRequest="10" HeightRequest="10" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
<ContentPresenter Margin="10,0,0,0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="RadioButton" x:Key="RadioButtonStyle">
<Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
</Style>
This worked reasonably well, so now I get the following look-and-feel on both Android and Windows:
Now I have one last problem. When I was using the default radio buttons (without my control template), they would reliably turn a "light gray" color whenever I set IsEnabled to false. I'd like to make it so that I can disable my radio button and have it turn a light gray color (to indicate that it is disabled) while still using my control template so I have a unified look-and-feel.
So I attempted to add a Disabled visual state to my control template, but it doesn't seem to be working. Here is my new control template with a Disabled state:
<ControlTemplate x:Key="RadioButtonTemplate">
<Border Stroke="Transparent" BackgroundColor="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter TargetName="border_circle" Property="Stroke" Value="LightGray" />
<Setter TargetName="check" Property="Fill" Value="LightGray" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid WidthRequest="20" HeightRequest="20" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center">
<Ellipse x:Name="border_circle" StrokeThickness="2" Stroke="DarkBlue" Fill="White" WidthRequest="18" HeightRequest="18" HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check" Fill="DarkBlue" WidthRequest="10" HeightRequest="10" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
<ContentPresenter Margin="10,0,0,0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="RadioButton" x:Key="RadioButtonStyle">
<Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
</Style>
Unfortunately, it's not working. Not only does the color not change when the radio button is disabled, but also my 2nd setter (setting the "Fill" property of the "check" object) causes a compile-time error as well ("Cannot resolve property Fill on type Border").
Any suggestions?
I was able to figure out a way to do what I needed to do. Rather than use the "Disabled" visual state in the visual state group, I was able to use style triggers. So now my control template and its corresponding style look like this:
<ControlTemplate x:Key="RadioButtonTemplate">
<Border Stroke="Transparent" BackgroundColor="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid WidthRequest="20" HeightRequest="20" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center">
<Ellipse x:Name="border_circle" StrokeThickness="2" Stroke="{TemplateBinding BorderColor}" Fill="White" WidthRequest="18" HeightRequest="18" HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check" Fill="{TemplateBinding BorderColor}" WidthRequest="10" HeightRequest="10" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
<ContentPresenter Margin="10,0,0,0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="RadioButton" x:Key="RadioButtonStyle">
<Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
<Style.Triggers>
<Trigger TargetType="RadioButton" Property="IsEnabled" Value="False">
<Setter Property="BorderColor" Value="LightGray" />
</Trigger>
<Trigger TargetType="RadioButton" Property="IsEnabled" Value="True">
<Setter Property="BorderColor" Value="DarkBlue" />
</Trigger>
</Style.Triggers>
</Style>

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.

How to create dynamically menu in MVVM

I'm working on a simple WPF project, using MVVM.
I want to create a menu with dynamically Items.
Its my xaml file:
<Menu.Resources>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Header"
Value="{Binding MenuText}" />
<Setter Property="Icon">
<Setter.Value>
<Image Source="{Binding MenuIcon}"
Height="16px"
Width="16px" />
</Setter.Value>
</Setter>
<Setter Property="ItemsSource"
Value="{Binding Children}" />
<Setter Property="Command" Value="{Binding DataContext.ClickCommand , RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Menu}}"></Setter>
<Setter Property="CommandParameter" Value="{Binding ItemCommandParameter}"></Setter>
</Style>
</Menu.Resources>
And It's the view model class that is content of my xaml file:
private ObservableCollection<MenuItemModel> _topMenuItems;
public ObservableCollection<MenuItemModel> TopMenuItems
{
get { return _topMenuItems; }
set
{
if (_topMenuItems == value)
return;
Set("TopMenuItems", ref _topMenuItems, value);
}
}
public void LoadMainMenu()
{
IList<Model.MenuItemModel> fileMenuItems = PopulateFileMenuEntries();
_topMenuItems = new ObservableCollection<MenuItemModel>();
_topMenuItems.Add(new MenuItemModel() { MenuText = "_File", Children = new ObservableCollection<MenuItemModel>(fileMenuItems) });
}
IList<MenuItemModel> PopulateFileMenuEntries()
{
List<MenuItemModel> fileMenuItems = new List<MenuItemModel>();
fileMenuItems.Add(new MenuItemModel() { MenuText = "_Theme" });
fileMenuItems.Add(new MenuItemModel() { MenuText = "_Exit" });
return fileMenuItems;
}
my Menu Item Model Class:
public class MenuItemModel : ObservableObject
{
private string _menuText;
public string MenuText
{
get { return _menuText; }
set
{
if (_menuText == value)
return;
Set("MenuText", ref _menuText, value);
}
}
private BitmapImage _menuIcon;
public BitmapImage MenuIcon
{
get { return _menuIcon; }
set
{
if (_menuIcon == value)
return;
Set("MenuIcon", ref _menuIcon, value);
}
}
private ObservableCollection<MenuItemModel> _children;
public ObservableCollection<MenuItemModel> Children
{
get { return _children; }
set
{
Set("Children", ref _children, value);
}
}
public string ItemCommandParameter { get; set; }
}
My question is here:
How can I fill menu Items dynamically instead of using PopulateFileMenuEntries method. For example I want to have just a List Collection that is get the proper menu Items from database. How can I assign this list collection to the menu items in my sample project? I have 2 menu Items with subItems:
Main : Student, Teacher, Course,...
File : Theme, Exit,...
I hope you will get idea from this
<Style TargetType="expanderControl:ExpanderControl">
<Setter Property="HorizontalAlignment"
Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="expanderControl:ExpanderControl">
<Grid>
<Grid.Resources>
<QuadraticEase x:Key="QuadraticEaseOut"
EasingMode="EaseOut"/>
<QuadraticEase x:Key="QuadraticEaseInOut"
EasingMode="EaseInOut"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Collapsed"
GeneratedDuration="0:0:0.15"
To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemsCanvas"
EnableDependentAnimation="True">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}"
KeyTime="0:0:0.00"
Value="0" />
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame"
EasingFunction="{StaticResource QuadraticEaseOut}"
KeyTime="0:0:0.15"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Duration="0"
To="1.0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ItemsCanvas" />
</Storyboard>
</VisualTransition>
<VisualTransition From="Expanded"
GeneratedDuration="0:0:0.15"
To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemsCanvas"
EnableDependentAnimation="True">
<EasingDoubleKeyFrame x:Name="ExpandedToCollapsedKeyFrame"
EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.00"
Value="1" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.15"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.00"
Value="1.0" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.15"
Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="ItemsCanvas"
EnableDependentAnimation="True">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.00"
Value="0.0" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}"
KeyTime="0:0:0.15"
Value="-35" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0"
To="0"
Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemsCanvas" />
<DoubleAnimation Duration="0"
To="0.0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ItemsCanvas" />
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemsCanvas" />
<DoubleAnimation Duration="0"
To="1.0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ItemsCanvas" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandabilityStates">
<VisualState x:Name="Expandable" />
<VisualState x:Name="NonExpandable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="NonExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ListViewItem x:Name="ExpandableContent" Background="Transparent"
Grid.ColumnSpan="2"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Header"
Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Grid.Column="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Grid.Row="0" />
<ContentControl x:Name="Expander"
ContentTemplate="{TemplateBinding ExpanderTemplate}"
Content="{TemplateBinding Expander}"
Grid.Column="1"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Margin="11,0,0,0"
Grid.Row="1" />
<Grid x:Name="ExpanderPanel"
Background="Transparent"
Grid.ColumnSpan="2"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
/>
<StackPanel Height="1" Background="Black" Grid.ColumnSpan="2"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2" VerticalAlignment="Bottom"></StackPanel>
</Grid>
</ListViewItem>
<ContentControl x:Name="NonExpandableContent"
Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding NonExpandableHeaderTemplate}"
Content="{TemplateBinding NonExpandableHeader}"
Grid.Column="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Grid.Row="0"
Grid.RowSpan="2"
Visibility="Collapsed" />
<Canvas x:Name="ItemsCanvas"
Grid.Column="1"
Margin="-120,0,0,0"
Opacity="0.0"
Grid.Row="2"
Width="{Binding ActualWidth, ElementName=Presenter}"
Height="{Binding ActualHeight, ElementName=Presenter}">
<Canvas.RenderTransform>
<CompositeTransform TranslateY="0.0" />
</Canvas.RenderTransform>
<ItemsPresenter x:Name="Presenter" />
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

ContentDialog doesn't scroll

In UWP the ContentDialog resizes only to a certain size and then the content is clipped - not scrolled. If I include a ScrollViewer in the Content it just grows with its' contents indefinately and nevers scrolls.
Since I found no solution to this elsewhere, here is mine:
From https://msdn.microsoft.com/en-us/library/windows/apps/mt299120.aspx copy the default Style for the ContentDialog and change the ScrollViewer's Properties from:
<ScrollViewer x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled"
to
<ScrollViewer x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
Sounds simple, but I spent too much time debugging the visual tree to figure this out...
Here is the complete Style that you apply to the ContentDialog you want to be scrollable:
<!-- Default style for Windows.UI.Xaml.Controls.ContentDialog -->
<Style TargetType="ContentDialog" x:Key="ScrollableContentDialogStyle">
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
<Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
<Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
<Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundElement"
Background="{TemplateBinding Background}"
FlowDirection="{TemplateBinding FlowDirection}"
BorderThickness="{ThemeResource ContentDialogBorderWidth}"
BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
MaxWidth="{TemplateBinding MaxWidth}"
MaxHeight="{TemplateBinding MaxHeight}"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}" >
<Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
ZoomMode="Disabled"
Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title"
Margin="{ThemeResource ContentDialogTitleMargin}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="20"
FontFamily="Segoe UI"
FontWeight="Normal"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsTabStop="False"
MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}" >
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter
Content="{TemplateBinding Content}"
MaxLines="2"
TextWrapping="Wrap"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Margin="{ThemeResource ContentDialogContentMargin}"
Foreground="{TemplateBinding Foreground}"
Grid.Row="1"
TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host"
Margin="{ThemeResource ContentDialogButton1HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
Height="{ThemeResource ContentDialogButtonHeight}"
HorizontalAlignment="Stretch" />
<Border x:Name="Button2Host"
Margin="{ThemeResource ContentDialogButton2HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
Height="{ThemeResource ContentDialogButtonHeight}"
Grid.Column="1"
HorizontalAlignment="Stretch" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Not sure if there has been some related enhancements in the latest SDKs, but at least this works now (very simple way to display long text in a dialog without any new XAML):
async Task ShowDialogAsync(string title, string text)
{
var dialog = new ContentDialog()
{
Title = title,
Content = new ScrollViewer()
{
Content = new TextBlock() { Text = text },
},
CloseButtonText = "ok"
};
await dialog.ShowAsync();
}
You have to modify the deafult ContentDialog with this content template o créate a new style to use it in your ContentDialog:
<Style x:Key="MyCustomToolsContentDialog"
TargetType="ContentDialog">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundElement"
Background="{TemplateBinding Background}"
FlowDirection="{TemplateBinding FlowDirection}"
BorderThickness="{ThemeResource ContentDialogBorderWidth}"
BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
MaxWidth="{TemplateBinding MaxWidth}"
MaxHeight="{TemplateBinding MaxHeight}"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}">
<Grid x:Name="DialogSpace"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<!-- Modify to 'Height="*"' intead of 'Height="Auto"'-->
<RowDefinition Height="*" />
<!-- Modify to 'Height="Auto"' intead of 'Height="*"'-->
<RowDefinition Height="Auto" />
<!-- Delete' RowDefinition -->
<!--<RowDefinition Height="Auto" />-->
</Grid.RowDefinitions>
<ScrollViewer x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled"
ZoomMode="Disabled"
Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<!-- Delete 'Height="Auto"' of RowDefinition.-->
<RowDefinition />
</Grid.RowDefinitions>
<ContentControl x:Name="Title"
Margin="{ThemeResource ContentDialogTitleMargin}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="20"
FontFamily="Segoe UI"
FontWeight="Normal"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsTabStop="False"
MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"
MaxLines="2"
TextWrapping="Wrap"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Margin="{ThemeResource ContentDialogContentMargin}"
Foreground="{TemplateBinding Foreground}"
Grid.Row="1"
TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host"
Margin="{ThemeResource ContentDialogButton1HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
Height="{ThemeResource ContentDialogButtonHeight}"
HorizontalAlignment="Stretch" />
<Border x:Name="Button2Host"
Margin="{ThemeResource ContentDialogButton2HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
Height="{ThemeResource ContentDialogButtonHeight}"
Grid.Column="1"
HorizontalAlignment="Stretch" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
Hope this help you.
Regards
Juanlu
For WinUI 3 (Windows.App.SDK):
The solution is similar but a bit different from #Markus Hütter 's solution.
First, note an easy way to get to the default template for copying and pasting, as #Markus Hütter suggested, is to add Style="{StaticResource DefaultContentDialogStyle}" to your content dialog, Right Click, and select Go To Definition. You can keep the style setting in your content dialog and later replace the style name with the new style name (discussed below).
In my application (and I assume, by default, in all WinUI 3 apps), the style exists in generic.xaml.
Copy the entire style into your App.xaml ResourceDictionary and change the ScrollViewer Disabled settings in the style to Auto, like this:
<ScrollViewer x:Name="ContentScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" ZoomMode="Disabled" IsTabStop="False">
Also, give your new custom style a unique name, such as:
<Style x:Key="MyCustomScrollableContentDialogStyle" TargetType="ContentDialog"> ...
Note, as mentioned, your ContentDialog will need to reference the new style name with Style="{StaticResource MyCustomScrollableContentDialogStyle}"
It's a bit long, but here is my final style:
<!-- Derived from Default style for Windows.UI.Xaml.Controls.ContentDialog. Scrollviewer settings were changed in this version -->
<Style x:Key="SSXScrollableContentDialogStyle" TargetType="ContentDialog">
<Setter Property="Foreground" Value="{ThemeResource ContentDialogForeground}" />
<Setter Property="Background" Value="{ThemeResource ContentDialogBackground}" />
<Setter Property="BorderThickness" Value="{ThemeResource ContentDialogBorderWidth}" />
<Setter Property="BorderBrush" Value="{ThemeResource ContentDialogBorderBrush}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="PrimaryButtonStyle" Value="{ThemeResource DefaultButtonStyle}" />
<Setter Property="SecondaryButtonStyle" Value="{ThemeResource DefaultButtonStyle}" />
<Setter Property="CloseButtonStyle" Value="{ThemeResource DefaultButtonStyle}" />
<Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DialogShowingStates">
<VisualStateGroup.Transitions>
<VisualTransition To="DialogHidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<SplineDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="1.05" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<SplineDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="1.05" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition To="DialogShowing">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
<SplineDoubleKeyFrame KeyTime="{StaticResource ControlNormalAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
<SplineDoubleKeyFrame KeyTime="{StaticResource ControlNormalAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
<LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="DialogHidden" />
<VisualState x:Name="DialogShowing">
<VisualState.Setters>
<Setter Target="PrimaryButton.IsTabStop" Value="True" />
<Setter Target="SecondaryButton.IsTabStop" Value="True" />
<Setter Target="CloseButton.IsTabStop" Value="True" />
<Setter Target="LayoutRoot.Visibility" Value="Visible" />
<Setter Target="BackgroundElement.TabFocusNavigation" Value="Cycle" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="DialogShowingWithoutSmokeLayer">
<VisualState.Setters>
<Setter Target="PrimaryButton.IsTabStop" Value="True" />
<Setter Target="SecondaryButton.IsTabStop" Value="True" />
<Setter Target="CloseButton.IsTabStop" Value="True" />
<Setter Target="LayoutRoot.Visibility" Value="Visible" />
<Setter Target="LayoutRoot.Background" Value="{x:Null}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DialogSizingStates">
<VisualState x:Name="DefaultDialogSizing" />
<VisualState x:Name="FullDialogSizing">
<VisualState.Setters>
<Setter Target="BackgroundElement.VerticalAlignment" Value="Stretch" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ButtonsVisibilityStates">
<VisualState x:Name="AllVisible">
<VisualState.Setters>
<Setter Target="FirstSpacer.Width" Value="{ThemeResource ContentDialogButtonSpacing}" />
<Setter Target="SecondaryColumn.Width" Value="*" />
<Setter Target="SecondaryButton.(Grid.Column)" Value="2" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NoneVisible">
<VisualState.Setters>
<Setter Target="CommandSpace.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PrimaryVisible">
<VisualState.Setters>
<Setter Target="PrimaryButton.(Grid.Column)" Value="4" />
<Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
<Setter Target="CloseButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SecondaryVisible">
<VisualState.Setters>
<Setter Target="SecondaryButton.(Grid.Column)" Value="4" />
<Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
<Setter Target="CloseButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CloseVisible">
<VisualState.Setters>
<Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
<Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PrimaryAndSecondaryVisible">
<VisualState.Setters>
<Setter Target="SecondaryButton.(Grid.Column)" Value="4" />
<Setter Target="CloseButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PrimaryAndCloseVisible">
<VisualState.Setters>
<Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SecondaryAndCloseVisible">
<VisualState.Setters>
<Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DefaultButtonStates">
<VisualState x:Name="NoDefaultButton" />
<VisualState x:Name="PrimaryAsDefaultButton">
<VisualState.Setters>
<Setter Target="PrimaryButton.Style" Value="{StaticResource AccentButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SecondaryAsDefaultButton">
<VisualState.Setters>
<Setter Target="SecondaryButton.Style" Value="{StaticResource AccentButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CloseAsDefaultButton">
<VisualState.Setters>
<Setter Target="CloseButton.Style" Value="{StaticResource AccentButtonStyle}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DialogBorderStates">
<VisualState x:Name="NoBorder" />
<VisualState x:Name="AccentColorBorder">
<VisualState.Setters>
<Setter Target="BackgroundElement.BorderBrush" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LayoutRoot" Visibility="Collapsed">
<Rectangle x:Name="SmokeLayerBackground" Fill="{ThemeResource ContentDialogSmokeFill}" />
<Border x:Name="BackgroundElement" Background="{TemplateBinding Background}" FlowDirection="{TemplateBinding FlowDirection}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" BackgroundSizing="InnerBorderEdge" CornerRadius="{TemplateBinding CornerRadius}" MinWidth="{ThemeResource ContentDialogMinWidth}" MaxWidth="{ThemeResource ContentDialogMaxWidth}" MinHeight="{ThemeResource ContentDialogMinHeight}" MaxHeight="{ThemeResource ContentDialogMaxHeight}" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform x:Name="ScaleTransform" />
</Border.RenderTransform>
<Grid x:Name="DialogSpace" CornerRadius="{ThemeResource OverlayCornerRadius}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="ContentScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" ZoomMode="Disabled" IsTabStop="False">
<Grid Background="{ThemeResource ContentDialogTopOverlay}" Padding="{ThemeResource ContentDialogPadding}" BorderThickness="{ThemeResource ContentDialogSeparatorThickness}" BorderBrush="{ThemeResource ContentDialogSeparatorBorderBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title" Margin="{ThemeResource ContentDialogTitleMargin}" Content="{TemplateBinding Title}" ContentTemplate="{TemplateBinding TitleTemplate}" FontSize="20" FontFamily="{StaticResource ContentControlThemeFontFamily}" FontWeight="SemiBold" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Left" VerticalAlignment="Top" IsTabStop="False">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"
MaxLines="2"
TextWrapping="Wrap"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" FontSize="{StaticResource ControlContentThemeFontSize}" FontFamily="{StaticResource ContentControlThemeFontFamily}" Foreground="{TemplateBinding Foreground}" Grid.Row="1" TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" XYFocusKeyboardNavigation="Enabled" Padding="{ThemeResource ContentDialogPadding}" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="PrimaryColumn" Width="*" />
<ColumnDefinition x:Name="FirstSpacer" Width="0" />
<ColumnDefinition x:Name="SecondaryColumn" Width="0" />
<ColumnDefinition x:Name="SecondSpacer" Width="{ThemeResource ContentDialogButtonSpacing}" />
<ColumnDefinition x:Name="CloseColumn" Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="PrimaryButton" IsTabStop="False" Content="{TemplateBinding PrimaryButtonText}" IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}" Style="{TemplateBinding PrimaryButtonStyle}" ElementSoundMode="FocusOnly" HorizontalAlignment="Stretch" />
<Button x:Name="SecondaryButton" IsTabStop="False" Content="{TemplateBinding SecondaryButtonText}" IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}" Style="{TemplateBinding SecondaryButtonStyle}" ElementSoundMode="FocusOnly" HorizontalAlignment="Stretch" />
<Button x:Name="CloseButton" IsTabStop="False" Grid.Column="4" Content="{TemplateBinding CloseButtonText}" Style="{TemplateBinding CloseButtonStyle}" ElementSoundMode="FocusOnly" HorizontalAlignment="Stretch" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

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>