How to change MahApps.Metro dialog content template width?

by

Just create your own style that overrides the dialog Template (and add the DialogShownStoryboard too).

<Style TargetType="{x:Type Dialog:BaseMetroDialog}"
        x:Key="NewCustomDialogStyle"
        BasedOn="{StaticResource {x:Type Dialog:BaseMetroDialog}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Dialog:BaseMetroDialog}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="DialogShownStoryboard">
                        <DoubleAnimation AccelerationRatio=".9"
                                            BeginTime="0:0:0"
                                            Duration="0:0:0.2"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1" />
                    </Storyboard>
                </ControlTemplate.Resources>
                <Grid Background="{TemplateBinding Background}">
                    <Border FocusVisualStyle="{x:Null}"
                            Focusable="False">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <ContentPresenter Grid.Row="0"
                                                Content="{TemplateBinding DialogTop}" />
                            <Grid Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="10*" />
                                    <ColumnDefinition Width="80*" />
                                    <ColumnDefinition Width="10*" />
                                </Grid.ColumnDefinitions>
                                <!--  Content area  -->
                                <Grid Grid.Column="1"
                                        Margin="0 10 0 0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <TextBlock Grid.Row="0"
                                                FontSize="{DynamicResource DialogTitleFontSize}"
                                                Foreground="{TemplateBinding Foreground}"
                                                Text="{TemplateBinding Title}"
                                                TextWrapping="Wrap" />
                                    <ContentPresenter Grid.Row="1"
                                                        Content="{TemplateBinding Content}" />
                                </Grid>
                            </Grid>
                            <ContentPresenter Grid.Row="2"
                                                Content="{TemplateBinding DialogBottom}" />
                        </Grid>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource DialogShownStoryboard}" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The namespace here is

xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"

Now use this custom style e.g. for a custom dialog

<Dialog:CustomDialog x:Key="CustomDialogTest"
                        Style="{StaticResource NewCustomDialogStyle}"
                        Title="This dialog allows arbitrary content. It will close in 5 seconds."
                        x:Name="CustomTestDialog">
    <StackPanel>
        <TextBlock Height="30"
                    Text="This dialog allows arbitrary content. You have to close it yourself by clicking the close button below."
                    TextWrapping="Wrap"
                    Foreground="{DynamicResource AccentColorBrush}" />
        <Button Content="Close Me!" />
    </StackPanel>
</Dialog:CustomDialog>

Screenshot from main demo

enter image description here

Update

With the latest version of MahApps.Metro it’s now possible to change e.g. the MessageDialog style globally.

<Style TargetType="{x:Type Dialog:MessageDialog}"
       x:Key="NewCustomMessageDialogStyle"
       BasedOn="{StaticResource {x:Type Dialog:BaseMetroDialog}}">
  <Setter Property="Template">
    <!-- the custom template for e.g. MessageDialog -->
  </Setter>
</Style>

<Style TargetType="{x:Type Dialog:MessageDialog}" BasedOn="{StaticResource NewCustomMessageDialogStyle}" />

enter image description here

Hope that helps!

More Related Contents:

  1. Template Binding in Control template
  2. The calling thread must be STA, because many UI components require this
  3. RelativeSource binding from a ToolTip or ContextMenu
  4. Change color of Button when Mouse is over
  5. The name does not exist in the namespace error in XAML
  6. How to get a group of toggle buttons to act like radio buttons in WPF?
  7. How to create custom window chrome in wpf?
  8. WPF CommandParameter is NULL first time CanExecute is called
  9. Calling a parameterized constructor from XAML
  10. Setting a property with an EventTrigger
  11. DataTrigger where value is NOT null?
  12. Is there a way to use data-template inheritance in WPF?
  13. KeyBinding in UserControl doesn’t work when TextBox has the focus
  14. WPF TreeView: How to style selected items with rounded corners like in Explorer
  15. How can I reduce RadioButton binding code?
  16. Create contextmenus for datagrid rows
  17. Creating an instance of a nested class in XAML
  18. Different views / data template based on member variable
  19. Difference between {Binding PropertyName} and {Binding Path=PropertyName}
  20. Combine expander and grid (resizable expander)
  21. WPF: Changing Resources (colors) from the App.xaml during runtime
  22. How to set DataGrid’s row Background, based on a property value using data bindings
  23. Boolean CommandParameter in XAML
  24. What is the difference for TargetType=”{x:Type Button}” and TargetType=”Button”?
  25. How to access a WPF control located in a ControlTemplate?
  26. How can I specify letter spacing or kerning, in a WPF TextBox?
  27. Setting DataContext within UserControl is affecting bindings in parent
  28. How to set foreground and background colors on a WPF Menu control?
  29. How to display search results in a WPF items control with highlighted query terms
  30. Can you define multiple TargetTypes for one XAML style?

Leave a Comment