如何更改MahApps.Metro对话框内容模板的宽度?

本文介绍了如何更改MahApps.Metro对话框内容模板的宽度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想更改 MahApps.Metro 对话框的基本模板(或创建新的对话框类型)，因为我想在狭窄的登录窗口中显示它们.现在，消息中的几乎所有第二个单词都在新行中，但是左右两侧都有很大的空格，我想减少这些空格.

I would like to change the base template of the MahApps.Metro dialogs (or create a new dialog type), because I would like to show them in a narrow login window. Right now almost all the second words in the message are in a new row, but there are nice big spaces on the right and the left side, which I would like to reduce.

我在BaseMetroDialog.xaml中发现消息对话框在垂直方向上分为三部分:左侧为 25％，内容为 50％， 25％空间.我想更改这些数字.

I've found in BaseMetroDialog.xaml that the message dialog is divided into three parts vertically: 25% space on left side, 50% for the content and 25% space on the right side. I would like to change these numbers.

但是我该如何用我的新模板更改BaseMetroWindow的控制模板?

But how could I change the control template of BaseMetroWindow with my new one?

推荐答案

只需创建自己的样式即可覆盖对话框Template(并添加DialogShownStoryboard).

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>

这里的命名空间是

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>

主要演示的屏幕截图

更新

使用最新版本的MahApps.Metro，现在可以更改例如全局MessageDialog样式.

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}" />

希望有帮助！