如何更改 MahApps.Metro 对话框内容模板宽度? [英] How to change MahApps.Metro dialog content template width?
问题描述
我想更改 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}" />
希望有帮助!
这篇关于如何更改 MahApps.Metro 对话框内容模板宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!