How to stretch the content of Callisto CustomDialog? - windows-store-apps

Question

I am having a hard time figuring out how CustomDialog determines the width of its content. Appended is the code copied from Callisto's test app with two HorizontalAlignment="Stretch" added. Nothing stretches. I want to stretch the content (e.g. StackPanel). I also tried assigning a value to the Width attribute of the StackPanel. It seems that CustomDialog has some algorithm to pick a maximum width. No matter what you do, its content will not exceed that width. Could anyone shed some light on this?
<!-- Example use of the CustomDialog control -->
<callisto:CustomDialog x:FieldModifier="public" x:Name="LoginDialog"
Title="Bacon Terms and Conditions"
Background="Teal" BackButtonVisibility="Visible" BackButtonClicked="LoginDialog_BackButtonClicked_1"
HorizontalAlignment="Stretch">
<StackPanel HorizontalAlignment="Stretch">
<TextBlock Margin="0,0,0,8" FontSize="14.6667" FontWeight="SemiLight" TextWrapping="Wrap">
Bacon sausage frankfurter tenderloin turkey salami andouille bresaola. Venison salami prosciutto, pork belly turducken tri-tip spare ribs chicken strip steak fatback shankle tongue boudin andouille. Meatloaf salami pork ground round turkey jerky meatball ball tip, filet mignon fatback flank prosciutto shank. Turkey boudin ham hock, filet mignon tri-tip bresaola tongue venison spare ribs meatloaf flank beef pancetta. Leberkas turducken flank ground round biltong chuck bacon kielbasa. Beef pastrami meatball, short loin venison swine pork loin shank meatloaf spare ribs.
</TextBlock>
<CheckBox Margin="0,0,0,8" Foreground="White" Content="I agree to the Terms and Conditions of Bacon" />
<TextBlock Margin="0,0,0,8" FontSize="14.6667" FontWeight="SemiLight" Text="Enter your name for acceptance" />
<callisto:WatermarkTextBox HorizontalAlignment="Left" Watermark="Type your name" Width="400" Height="35" />
<StackPanel Margin="0,20,0,0" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Content="OK" Width="90" Margin="0,0,20,0" />
<Button Content="CANCEL" Width="190" Click="DialogCancelClicked" />
</StackPanel>
</StackPanel>
</callisto:CustomDialog>

Answer 1

Currently, the default style does not seem to support this. Here is the current default style (based on the GitHub).
<Style TargetType="local:CustomDialog">
<Setter Property="IsOpen" Value="False" />
<Setter Property="BorderThickness" Value="{ThemeResource CustomDialogBorderThemeThickness}"/>
<Setter Property="BorderBrush" Value="{ThemeResource CustomDialogBorderThemeBrush}" />
<Setter Property="BackButtonVisibility" Value="Collapsed" />
<Setter Property="Background" Value="{ThemeResource CustomDialogBackgroundThemeBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomDialog">
<Popup x:Name="PART_RootPopup" IsLightDismissEnabled="False" IsOpen="{TemplateBinding IsOpen}">
<Grid x:Name="PART_RootGrid" Background="#72000000">
<Border x:Name="PART_BannerBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" VerticalAlignment="Center">
<Grid x:Name="PART_DialogGrid" Background="{TemplateBinding Background}" VerticalAlignment="Center">
<Grid.Resources>
<Style x:Key="DialogBackButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="26.66667"/>
<Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
<Setter Property="AutomationProperties.Name" Value="Back"/>
<Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Width="30" Height="30">
<Grid Margin="-3,-5,0,0">
<TextBlock x:Name="BackgroundGlyph" Text="" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background}"/>
<TextBlock x:Name="NormalGlyph" Text="{ThemeResource SettingsFlyoutBackButtonGlyph}" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background, Converter={StaticResource ColorContrast}}"/>
<TextBlock x:Name="ArrowGlyph" Text="" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background}" Opacity="0"/>
</Grid>
<Rectangle
x:Name="FocusVisualWhite"
IsHitTestVisible="False"
Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="1.5"/>
<Rectangle
x:Name="FocusVisualBlack"
IsHitTestVisible="False"
Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="0.5"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BackButtonPointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ElementName=PART_DialogGrid, Path=Background, Converter={StaticResource ColorContrast}}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Storyboard.TargetName="ArrowGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="NormalGlyph"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="FocusVisualWhite"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="FocusVisualBlack"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Column="1" VerticalAlignment="Center">
<StackPanel Margin="13,19,13,25" HorizontalAlignment="Center" Width="{TemplateBinding Width}" MaxWidth="680">
<local:DynamicTextBlock Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="26.6667" FontWeight="Light" Margin="0,0,0,8" />
<ContentPresenter Margin="0" x:Name="PART_Content" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" />
</StackPanel>
</Border>
<Button x:Name="PART_BackButton" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,24,0,0"
Style="{StaticResource DialogBackButtonStyle}" Command="{TemplateBinding BackButtonCommand}" CommandParameter="{TemplateBinding BackButtonCommandParameter}" Visibility="{TemplateBinding BackButtonVisibility}"/>
</Grid>
</Border>
</Grid>
</Popup>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is my thought for a solution. I've included it as an explicitly declared property of the CustomDialog in question. You may be able to add it to your project directly so it overrides it in all instances, or declare it statically and reference it in all of your CustomDialogs.
I also changed the namespace references to mimic yours. (local -> callisto)
<callisto:CustomDialog ...>
....
<callisto:CustomDialog.Style>
<Style TargetType="callisto:CustomDialog">
<Setter Property="IsOpen" Value="False" />
<Setter Property="BorderThickness" Value="{ThemeResource CustomDialogBorderThemeThickness}"/>
<Setter Property="BorderBrush" Value="{ThemeResource CustomDialogBorderThemeBrush}" />
<Setter Property="BackButtonVisibility" Value="Collapsed" />
<Setter Property="Background" Value="{ThemeResource CustomDialogBackgroundThemeBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="callisto:CustomDialog">
<Popup x:Name="PART_RootPopup" IsLightDismissEnabled="False" IsOpen="{TemplateBinding IsOpen}">
<Grid x:Name="PART_RootGrid" Background="#72000000">
<Border x:Name="PART_BannerBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" VerticalAlignment="Center">
<Grid x:Name="PART_DialogGrid" Background="{TemplateBinding Background}" VerticalAlignment="Center">
<Grid.Resources>
<Style x:Key="DialogBackButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="26.66667"/>
<Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
<Setter Property="AutomationProperties.Name" Value="Back"/>
<Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Width="30" Height="30">
<Grid Margin="-3,-5,0,0">
<TextBlock x:Name="BackgroundGlyph" Text="" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background}"/>
<TextBlock x:Name="NormalGlyph" Text="{ThemeResource SettingsFlyoutBackButtonGlyph}" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background, Converter={StaticResource ColorContrast}}"/>
<TextBlock x:Name="ArrowGlyph" Text="" Foreground="{Binding ElementName=PART_DialogGrid, Path=Background}" Opacity="0"/>
</Grid>
<Rectangle
x:Name="FocusVisualWhite"
IsHitTestVisible="False"
Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="1.5"/>
<Rectangle
x:Name="FocusVisualBlack"
IsHitTestVisible="False"
Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="0.5"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BackButtonPointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ElementName=PART_DialogGrid, Path=Background, Converter={StaticResource ColorContrast}}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Storyboard.TargetName="ArrowGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="NormalGlyph"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="FocusVisualWhite"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="FocusVisualBlack"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Border VerticalAlignment="Center">
<StackPanel Margin="13,19,13,25" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Width="{TemplateBinding Width}" MaxWidth="680">
<callisto:DynamicTextBlock Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="26.6667" FontWeight="Light" Margin="0,0,0,8" />
<ContentPresenter Margin="0" x:Name="PART_Content" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" HorizontalAllignment="{TemplateBinding HorizontalContentAlignment}"/>
</StackPanel>
</Border>
<Button x:Name="PART_BackButton" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,24,0,0"
Style="{StaticResource DialogBackButtonStyle}" Command="{TemplateBinding BackButtonCommand}" CommandParameter="{TemplateBinding BackButtonCommandParameter}" Visibility="{TemplateBinding BackButtonVisibility}"/>
</Grid>
</Border>
</Grid>
</Popup>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
....
</callisto:CustomDialog>
Hope this helps and happy coding!
Edit: Wrong style! Fixed it, sorry for that.
Edit: One last thing to try, removed the column definitions from the content definition. This may have an effect on the title positioning, so you may need to play around with it at the bottom.