Search code examples
xamlwindows-runtimewinrt-xamlwin-universal-appcallisto

Callisto Custom Dialog Custom Styling for Windows App


Is there a way to customize the styling of the Callisto Custom Dialog other than the background? I want to change the font size and color of the title property of the Custom Dialog. Any suggestions without messing with the base style?

Reference: https://github.com/timheuer/callisto/wiki/CustomDialog


Solution

  • The CustomDialog's template calculates it's title's Foreground to a colour which contrasts with the Background and sets the FontSize to 26.6667:

    <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> 
    

    If you want to change these you'll need to retemplate the dialog. You can copy the template from Callisto's generic.xaml and then replace the Foreground and FontSize properties. You may want to use a TemplateBinding so you can set them on the CustomDialog when you call it:

    <StackPanel Margin="9,5" HorizontalAlignment="Center" Width="{TemplateBinding Width}" MaxWidth="680">
        <callisto:DynamicTextBlock Foreground="{TemplateBinding Foreground}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="{TemplateBinding FontSize}" FontWeight="Light" Margin="0,0,0,8" />
        <ContentPresenter Margin="0" x:Name="PART_Content" Foreground="{TemplateBinding Foreground}" />
    </StackPanel>
    

    Then set them to your own resources:

    <callisto:CustomDialog Background="{ThemeResource MyCustomDialogBackground}" Foreground="{ThemeResource MyCustomDialogForeground}" Title="Lorem ipsum" Template="{StaticResource CustomDialogControlTemplate1}"></callisto:CustomDialog>