ContentDialog doesn't scroll - xaml

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>

Related

Display message when ListView (nested inside a template) is empty in UWP

I am using MasterDetailsView control for my app. It offers a way to customize the details panel when no items are selected, but it doesn't offer a way to customize the master panel when no items are available.
Basically, what I want to accomplish is to display a message (TextBlock) instead of the default ListView when the latter has no items.
I just can't get it to work. My guess is that the ListView is nested inside a ControlTemplate that defines the MasterDetailsView control.
The only way I managed to do this statically (without any update at runtime) was to overwrite MasterDetailsView.Resources, where I add a Controltemplate for ListView, like in the markup below:
<Page
...
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls
...>
<controls:MasterDetailsView.Resources>
<Style TargetType="ListView" >
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid>
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Style="{StaticResource SubtitleTextBlockStyle}"
TextAlignment="Center"
Text="No content"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</controls:MasterDetailsView.Resources>
However, as I mentioned, that gives me the static behavior. I need this TextBlock to be displayed only when the data source my ListView is bound to runs out of items.
I tried to solve this by binding the Visibility property of my TextBlock to a Converter, but the converter isn't even reached (I debugged after adding a breakpoint to the Convert() method). I'm not sure if I used it properly though (I ommited the declaration of VisibleWhenZeroConverter and its source code for brevity):
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Style="{StaticResource SubtitleTextBlockStyle}"
TextAlignment="Center"
Text="No content"
Visibility="{Binding ElementName=MyMasterDetailsView, Path=ViewModel.SampleItems.Count, Converter={StaticResource VisibleWhenZeroConverter}}"/>
Obs: ViewModel is a property of MyMasterDetailsView, and it has a ObservableCollection, named SampleItems, which is never null.
I also tried to work this out by using DataTriggerBehavior with a ChangePropertyAction (from Microsoft.Xaml.Interactions.Core), but without any luck either. I'm also not sure if I did it the right way.
In case someone can answer me if this is even possible with MasterDetailsView control, I'd appreciate. Or maybe give an example of how I'd do this using one of the approaches from above, or even another one.
Best regards!
It should be noted that binding the Count of the collection cannot dynamically change the state. Although the Count property is indeed modified, the converter will not take effect because the UI is not notified.
If you are using ObservableCollection as the ItemsSource, you can listen to the ObservableCollection.CollectionChanged event and change the display of MasterDetailsView in the event callback.
On this basis, you can create a custom dependency property by deriving MasterDetailsView to change the display.
CustomMasterDetailsView.cs
public class CustomMasterDetailsView : MasterDetailsView
{
public CustomMasterDetailsView() : base()
{
this.DefaultStyleKey = typeof(CustomMasterDetailsView);
}
public Visibility EmptyTipVisibility
{
get { return (Visibility)GetValue(EmptyTipVisibilityProperty); }
set { SetValue(EmptyTipVisibilityProperty, value); }
}
public static readonly DependencyProperty EmptyTipVisibilityProperty =
DependencyProperty.Register("EmptyTipVisibility", typeof(Visibility), typeof(CustomMasterDetailsView), new PropertyMetadata(Visibility.Collapsed));
}
CustomMasterDetailsView.xaml (ResourceDictionary)
<Style TargetType="local:CustomMasterDetailsView">
<Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource ApplicationForegroundThemeBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomMasterDetailsView">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="RootPanel">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="MasterColumn"
Width="Auto" />
<ColumnDefinition x:Name="DetailsColumn"
Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="MasterPanel"
Width="{TemplateBinding MasterPaneWidth}"
Background="{TemplateBinding MasterPaneBackground}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0,0,1,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderContentPresenter"
Margin="12,0"
x:DeferLoadStrategy="Lazy"
Content="{TemplateBinding MasterHeader}"
ContentTemplate="{TemplateBinding MasterHeaderTemplate}"
Visibility="Collapsed" />
<ListView x:Name="MasterList"
Grid.Row="1"
IsTabStop="False"
ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
ItemContainerStyleSelector="{TemplateBinding ItemContainerStyleSelector}"
ItemTemplate="{TemplateBinding ItemTemplate}"
ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
ItemsSource="{TemplateBinding ItemsSource}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Style="{StaticResource SubtitleTextBlockStyle}"
TextAlignment="Center"
Grid.Row="1" Visibility="{TemplateBinding EmptyTipVisibility}"
Text="No content"/>
<Grid x:Name="MasterCommandBarPanel" Grid.Row="2"></Grid>
</Grid>
<Grid x:Name="DetailsPanel"
Grid.Column="1">
<ContentPresenter x:Name="NoSelectionPresenter"
Content="{TemplateBinding NoSelectionContent}"
ContentTemplate="{TemplateBinding NoSelectionContentTemplate}" />
<Grid x:Name="SelectionDetailsPanel">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="MasterDetailsBackButton"
Background="Transparent"
Height="44"
Width="48"
Visibility="Collapsed">
<SymbolIcon Symbol="Back"/>
</Button>
<ContentPresenter x:Name="DetailsHeaderPresenter"
Content="{TemplateBinding DetailsHeader}"
ContentTemplate="{TemplateBinding DetailsHeaderTemplate}"
Grid.Column="1"/>
</Grid>
<ContentPresenter x:Name="DetailsPresenter"
Background="{TemplateBinding Background}"
ContentTemplate="{TemplateBinding DetailsTemplate}"
Grid.Row="1">
</ContentPresenter>
<Grid x:Name="DetailsCommandBarPanel" Grid.Row="2"></Grid>
<Grid.RenderTransform>
<TranslateTransform x:Name="DetailsPresenterTransform" />
</Grid.RenderTransform>
</Grid>
</Grid>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="NoSelectionWide"
To="HasSelection">
<Storyboard>
<DrillInThemeAnimation EntranceTargetName="SelectionDetailsPanel"
ExitTargetName="NoSelectionPresenter" />
</Storyboard>
</VisualTransition>
<VisualTransition From="NoSelectionNarrow"
To="HasSelection">
<Storyboard>
<DoubleAnimation BeginTime="0:0:0"
Storyboard.TargetName="DetailsPresenterTransform"
Storyboard.TargetProperty="X"
From="200"
To="0"
Duration="0:0:0.25">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation BeginTime="0:0:0"
Storyboard.TargetName="SelectionDetailsPanel"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"
Duration="0:0:0.25">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualTransition>
<VisualTransition From="HasSelection"
To="NoSelectionWide">
<Storyboard>
<DrillOutThemeAnimation EntranceTargetName="NoSelectionPresenter"
ExitTargetName="SelectionDetailsPanel" />
</Storyboard>
</VisualTransition>
<VisualTransition From="HasSelection"
To="NoSelectionNarrow">
<Storyboard>
<DoubleAnimation BeginTime="0:0:0"
Storyboard.TargetName="DetailsPresenterTransform"
Storyboard.TargetProperty="X"
From="0"
To="200"
Duration="0:0:0.25" />
<DoubleAnimation BeginTime="0:0:0.08"
Storyboard.TargetName="SelectionDetailsPanel"
Storyboard.TargetProperty="Opacity"
From="1"
To="0"
Duration="0:0:0.17">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation BeginTime="0:0:0.0"
Storyboard.TargetName="MasterPanel"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"
Duration="0:0:0.25">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoSelectionWide">
<VisualState.Setters>
<Setter Target="SelectionDetailsPanel.Visibility" Value="Collapsed" />
<Setter Target="MasterPanel.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="HasSelectionWide">
<VisualState.Setters>
<Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed" />
<Setter Target="MasterPanel.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="HasSelectionNarrow">
<VisualState.Setters>
<Setter Target="MasterPanel.Visibility" Value="Collapsed" />
<Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NoSelectionNarrow">
<VisualState.Setters>
<Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed" />
<Setter Target="SelectionDetailsPanel.Visibility" Value="Collapsed" />
<Setter Target="MasterPanel.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="WidthStates">
<VisualState x:Name="NarrowState">
<VisualState.Setters>
<Setter Target="MasterColumn.Width" Value="*" />
<Setter Target="DetailsColumn.Width" Value="0" />
<Setter Target="DetailsPanel.(Grid.Column)" Value="0" />
<Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed" />
<Setter Target="MasterPanel.BorderThickness" Value="0" />
<Setter Target="MasterPanel.Width" Value="NaN" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideState">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
...
<ResourceDictionary Source="ms-appx:///Controls/CustomMasterDetailsView.xaml" />
...
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Usage
if(SampleItems.Count == 0)
{
MyMasterDetailsView.EmptyTipVisibility = Visibility.Visible;
}
else
{
MyMasterDetailsView.EmptyTipVisibility = Visibility.Collapsed;
}

How to keep radiobutton width from expanding when text is bolded on click

I have these two radio buttons, and on click i am making the text inside the radio button bold. When this happens, the width of the radio button increases by a few pixels. How can I keep this from happening? In this example the "Content" inside the radio button is hard coded, but this wont be hard coded in the future, so giving the buttons a set width is not an option. Any ideas on how i can accomplish this?
<Page
x:Class="ButtonTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ButtonTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="{ThemeResource RadioButtonBackground}" />
<Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}" />
<Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
<Setter Property="Padding" Value="16,12" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="ContentPresenter.Foreground" Value="Purple" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="FocusContentPresenter.FontWeight" Value="Bold" />
<Setter Target="ContentPresenter.FontWeight" Value="Bold" />
<Setter Target="FocusContentPresenter.(UIElement.Opacity)" Value="1" />
<Setter Target="ContentPresenter.(UIElement.Opacity)" Value="0" />
</VisualState.Setters>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TopBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Height="32" VerticalAlignment="Top">
<Border x:Name="TopBorder" BorderBrush="#FF054EEA" BorderThickness="0,5,0,0" HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="82" Margin="15,1,-77,0" Visibility="Collapsed"></Border>
</Grid>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
<ContentPresenter x:Name="FocusContentPresenter" Opacity="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="13,183,231,411">
<RadioButton Content="RadioButton" x:Name="Radio1" GroupName="Menu" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}"/>
</Grid>
<Grid Margin="13,257,227,341">
<RadioButton Content="RadioButton" GroupName="Menu" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}" />
</Grid>
</Grid>
Just place this invisible TextBlock next to your ContentPresenter.
<TextBlock Text="{TemplateBinding Content}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
TextWrapping="Wrap"
Opacity="0"
IsHitTestVisible="False"
FontWeight="Bold"
Margin="{TemplateBinding Padding}" />

How to apply same style to all the textbox's at visual state setters in a single setter using uwp

I want to apply same width to all the textbox's. So if the screen size changes then I need to change the textboxs width. For that I want apply a style in a single setter at visual state (xaml).
How can I achieve this?
I agree with #Chris W, and if I didn't misunderstand your question, you wanted to create one single style for all the TextBoxs and you want to change the width in this style when window's size changed.
If you insist to design your layout in this way, you can create a VisualStateGroup in the default template style of TextBox for example like this:
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<!--<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />-->
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
<Grid.Resources>
...
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
...
</VisualStateGroup>
<VisualStateGroup x:Name="ButtonStates">
...
</VisualStateGroup>
<VisualStateGroup>
<VisualState x:Name="Mobile">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BorderElement.Width" Value="250" />
<Setter Target="HeaderContentPresenter.Width" Value="250" />
<Setter Target="ContentElement.Width" Value="210" />
<Setter Target="PlaceholderTextContentPresenter.Width" Value="250" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PC">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BorderElement.Width" Value="450" />
<Setter Target="HeaderContentPresenter.Width" Value="450" />
<Setter Target="ContentElement.Width" Value="410" />
<Setter Target="PlaceholderTextContentPresenter.Width" Value="450" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" />
<ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TextControlHeaderForeground}" FontWeight="Normal" Margin="0,0,0,8" Grid.Row="0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
<ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollVie
<ContentControl x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource TextControlPlaceholderForeground}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" />
<Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" Margin="{ThemeResource HelperButtonThemePadding}" MinWidth="34" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" V
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And you can apply this style in all your textboxs for example like this:
<TextBox Style="{StaticResource TextBoxStyle}" Height="100" />

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>

Merge Header Row in Silverlight DataGrid

I'm trying to obtain a table with the following format:
Header 1 | Header 2
Col1 | Col2 | Col3 Col4
while using Silverlight.
I have searched, without success.
Any ideas?
[EDIT]
I have found this blog post, but the data and the column header doesn't get align.
Merging Silverlight DataGrid Headers
I had some luck with the block entry mentioned at the edited question. Indeed header and data cells aren't aligned. You need to manually adjust the sizes of these to match. In cases, where the data fields are expected to be of a common specified width, this will work fine. For reference, I am copying this solution here:
<Style x:Key="DataGridBaseHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader">
<Setter Property="FontWeight" Value="Bold" />
</Style>
<Style x:Key="TimeSheetTotalsHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader"
BasedOn="{StaticResource TimeSheetDayHeaderStyle}">
<Setter Property="Foreground" Value="#FFFF0000"/>
</Style>
<Style x:Key="TimeSheetDayHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader"
BasedOn="{StaticResource DataGridBaseHeaderStyle}">
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="SeparatorBrush" Value="#FFC9CACA"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0"
Storyboard.TargetName="BackgroundRectangle"
Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
<ColorAnimation Duration="0"
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#7FFFFFFF"/>
<ColorAnimation Duration="0"
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#CCFFFFFF"/>
<ColorAnimation Duration="0"
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#F2FFFFFF"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0"
Storyboard.TargetName="BackgroundRectangle"
Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
<ColorAnimation Duration="0"
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color" To="#D8FFFFFF"/>
<ColorAnimation Duration="0"
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#C6FFFFFF"/>
<ColorAnimation Duration="0"
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#8CFFFFFF"/>
<ColorAnimation Duration="0"
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#3FFFFFFF"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SortStates">
<VisualState x:Name="Unsorted"/>
<VisualState x:Name="SortAscending" />
<VisualState x:Name="SortDescending" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="BackgroundRectangle" Fill="#FF1F3B53" Stretch="Fill" Grid.ColumnSpan="2"/>
<Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FCFFFFFF" Offset="0.015"/>
<GradientStop Color="#F7FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.6"/>
<GradientStop Color="#D1FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="1" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<!-- Row 0 -->
<!-- This was edited in order to work in Silvelight 4 -->
<ContentPresenter Content="Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}"
VerticalAlignment="Center" HorizontalAlignment="Center"
Grid.ColumnSpan="3" />
<!-- Row 1 -->
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1"
Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="3" />
<!-- Row 2 -->
<ContentPresenter Content="Qty" Grid.Row="2" VerticalAlignment="Center"
HorizontalAlignment="Center" />
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1"
Visibility="Visible" Grid.Row="2" Grid.Column="1" />
<ContentPresenter Content="Hours" Grid.Row="2" Grid.Column="2"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<Rectangle x:Name="VerticalSeparator" Fill="#FFC9CACA"
VerticalAlignment="Stretch" Width="1" Visibility="Visible"
Grid.Row="1" Grid.Column="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The original Style was slightly edited in order to work with Silverlight 4 (more details here).
You also need to define a TextBox style with a fixed width that matches the width of the header:
<Style x:Key="TimeSheetTextBoxStyle" TargetType="TextBox">
<Setter Property="Width" Value="50"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
</Style>
Use of the styles in the DataGrid:
<data:DataGridTemplateColumn Header="Tue" HeaderStyle="{StaticResource TimeSheetDayHeaderStyle}">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding TuesdayQuantity}" Style="{StaticResource TimeSheetTextBoxStyle}"/>
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" />
<TextBox Text="{Binding TuesdayHours}" Margin="2,0,0,0" Style="{StaticResource TimeSheetTextBoxStyle}"/>
</StackPanel>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>