WPF - Customize the style of MessageBox in Extended WPF Toolkit

Question

For the sake of customization for MessageBox's style , I use this toolkit, and I copy the style code from its official page:

http://wpftoolkit.codeplex.com/wikipage?title=MessageBox&referringTitle=Documentation

I changed it a bit:

<Application x:Class="TotaraEditor.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:TotaraEditor"
             xmlns:toolkit="http://schemas.xceed.com/wpf/xaml/toolkit"
             StartupUri="MainWindow.xaml"
             ShutdownMode="OnMainWindowClose">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Themes/MetroDark/MetroDark.MSControls.Core.Implicit.xaml" />
                <ResourceDictionary Source="Themes/MetroDark/MetroDark.MSControls.Toolkit.Implicit.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <SolidColorBrush x:Key="MyButtonHoverBrush" Color="#FF2D2D30" />
            <SolidColorBrush x:Key="MyButtonPressedBrush" Color="#FF03A9DD" />

            <Style x:Key="MyCloseButtonStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background)">
                                                    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource MyButtonHoverBrush}"></DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background)">
                                                    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource MyButtonPressedBrush}"></DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Background" CornerRadius="0,0,0,0" Background="Green">
                                    <Border Margin="1,0,1,1" BorderBrush="#59FFFFFF" BorderThickness="1" CornerRadius="0,0,1,0"/>
                                </Border>
                                <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                <Path x:Name="path" Fill="White" Margin="0,0,0,1" Visibility="Collapsed"
                    Height="60"
        Width="7"
        Stretch="Fill"
        Opacity="1"
        Data="M 2,6 C2,6 3,6 3,6 3,6 3,5 3,5 3,5 4,5 4,5 4,5 4,6 4,6 4,6 5,6 5,6 5,6 7,6 7,6 7,6 7,5 7,5 7,5 6,5 6,5 6,5 6,4 6,4 6,4 5,4 5,4 5,4 5,2 5,2 5,2 6,2 6,2 6,2 6,1 6,1 6,1 7,1 7,1 7,1 7,0 7,0 7,0 5,0 5,0 5,0 4,0 4,0 4,0 4,1 4,1 4,1 3,1 3,1 3,1 3,0 3,0 3,0 2,0 2,0 2,0 0,0 0,0 0,0 0,1 0,1 0,1 1,1 1,1 1,1 1,2 1,2 1,2 2,2 2,2 2,2 2,4 2,4 2,4 1,4 1,4 1,4 1,5 1,5 1,5 0,5 0,5 0,5 0,6 0,6 0,6 2,6 2,6 z"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="{x:Type toolkit:MessageBox}">
                <Setter Property="Background" Value="#FF1E1E1E" />
                <Setter Property="BorderBrush" Value="#FF999999" />
                <Setter Property="CaptionForeground" Value="#FFF1F1F1" />
                <Setter Property="WindowBorderBrush" Value="#FF686868" />
                <Setter Property="WindowBackground" Value="#FF2D2D30" />
                <Setter Property="WindowOpacity" Value="0.3" />
                <Setter Property="Foreground" Value="#FFF1F1F1"/>
                <Setter Property="CloseButtonStyle" Value="{StaticResource MyCloseButtonStyle}"/>
            </Style>



        </ResourceDictionary>

    </Application.Resources>
</Application>

This is how I use it in code behind:

var res = Xceed.Wpf.Toolkit.MessageBox.Show( 
                            "R U sure?", 
                            "Confirm dialog", 
                            MessageBoxButton.YesNoCancel, 
                            MessageBoxImage.None, 
                            MessageBoxResult.Cancel, 
                            null 
                        ); 
if ("Cancel" == res.ToString()) {...} 
else if ("No" == res.ToString()) {...} 
else if ("Yes" == res.ToString()) {...} 
else {...}

And now what I have got is:

As there is no way to touch the XAML of those buttons, how should I change the buttons style? At least I want to remove the glowing effect of the header.

Thanks.

UPDATE

I am sure the glowing effect is not caused by some style applied to the Label, it is a styled rectangle underneath the Label, I found this in WPF Inspector:

After I set the height of that rect to 0, that glowing thing disappeared.

jsanalytics · Accepted Answer · 2016-04-27T04:11:55.230

You can change the button style like this:

private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        Xceed.Wpf.Toolkit.MessageBox mbox = new Xceed.Wpf.Toolkit.MessageBox();
        mbox.OkButtonStyle = (Style)Resources["ButtonStyle1"];
        mbox.OkButtonContent = "Click Me !";
        mbox.Caption = "My custom caption";
        mbox.Text = "My custom message";
        mbox.ShowDialog();
    }

XAML:

    <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Green"></Setter>
        <Setter Property="Foreground" Value="White"></Setter>
    </Style>

As for the glowing effect in your caption, you have to modify the style you copied from the link you posted accordingly, or create your own style.

EDIT: Using MetroDark style:

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        var res = Xceed.Wpf.Toolkit.MessageBox.Show(
                           "R U sure?",
                           "Confirm dialog",
                           MessageBoxButton.YesNoCancel,
                           MessageBoxImage.None,
                           MessageBoxResult.Cancel,
                           (Style)Resources["MessageBoxStyle1"]
                       );

        if ("Cancel" == res.ToString())
        {
        }
        else if ("No" == res.ToString())
        {
        }
        else if ("Yes" == res.ToString())
        {
        }
        else
        {
        }
    }

XAML:

        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Background" Value="LightGreen"></Setter>
            <Setter Property="Foreground" Value="DarkGreen"></Setter>
        </Style>
        <Style x:Key="ButtonStyle2" TargetType="Button">
            <Setter Property="Background" Value="LightCoral"></Setter>
            <Setter Property="Foreground" Value="DarkRed"></Setter>
        </Style>
        <Style x:Key="ButtonStyle3" TargetType="Button">
            <Setter Property="Background" Value="LightYellow"></Setter>
            <Setter Property="Foreground" Value="DarkOrange"></Setter>
        </Style>

        <Style x:Key="MessageBoxStyle1" TargetType="{x:Type xctk:MessageBox}">
            <Setter Property="Background" Value="#FF1E1E1E" />
            <Setter Property="BorderBrush" Value="#FF999999" />
            <Setter Property="CaptionForeground" Value="#FFF1F1F1" />
            <Setter Property="WindowBorderBrush" Value="#FF686868" />
            <Setter Property="WindowBackground" Value="#FF2D2D30" />
            <Setter Property="WindowOpacity" Value="0.3" />
            <Setter Property="Foreground" Value="#FFF1F1F1"/>
            <Setter Property="CloseButtonStyle" Value="{StaticResource MyCloseButtonStyle}"/>
            <Setter Property="YesButtonStyle" Value="{StaticResource ButtonStyle1}"></Setter>
            <Setter Property="NoButtonStyle"  Value="{StaticResource ButtonStyle2}"></Setter>
            <Setter Property="CancelButtonStyle" Value="{StaticResource ButtonStyle3}"></Setter>
        </Style>

EDIT 2: The caption glow is linked to the CaptionShadowBrush:

        <Setter Property="CaptionShadowBrush" Value="LightCoral"></Setter>

You can either set it to Transparent, or get rid of it altogether:

        <Setter Property="CaptionShadowBrush" Value="Transparent"></Setter>

Thank you jstreet, I updated the question, as you can see, in the piece of code for style, I didn't see anything related to the glowing effect, most of the code is about Button style. — VincentZHANG, Apr 26 '16 at 23:16
On the other hand, I am using the MessageBox to get users decision:`var res = Xceed.Wpf.Toolkit.MessageBox.Show( "R U sure?", "Confirm dialog", MessageBoxButton.YesNoCancel, MessageBoxImage.None, MessageBoxResult.Cancel, null ); if ("Cancel" == res.ToString()) {...} else if ("No" == res.ToString()) {...} else if ("Yes" == res.ToString()) {...} else {...}` — VincentZHANG, Apr 26 '16 at 23:21
@VincentZHANG please post the style as text, not as a print screen so people can copy it. Also please move code from your comment to your post and clarify exactly what you need then. — jsanalytics, Apr 26 '16 at 23:25
Alright, it's done, the style code is the same as in the link I posted. Thanks. — VincentZHANG, Apr 26 '16 at 23:33
Because you're calling `MessageBox.Show()`, which is a `static` method, you don't get a change to set any `Style` for it. BTW, when i run your code i get a plain `MessageBox` without any `Style`, so there must be something you're not showing us. And if i force the style you posted, it does not correspond exactly to the print screen of the message box you're showing; there's no glowing. So something is inconsistent between the code you post and the results you get. — jsanalytics, Apr 27 '16 at 00:31
Thank you so much for taking your time to try my code, I truly appreciate that. All I have done so far is install MetroDark theme into my project through NuGet, and add the ResourceDictionaries, And then I copied ExtendWPFToolkit's .dll files into my project's directory, and added a reference to Xceed.Wpf.Toolkit.dll, and then copied the piece of style code from that link, I changed some colors, that's all. I update my whole App.xaml in the question, you can see all the changes from there, which might be related. That's pretty strange now, and that's exactly why I ask for help here. — VincentZHANG, Apr 27 '16 at 00:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/110326/discussion-between-vincentzhang-and-jstreet). — VincentZHANG, Apr 27 '16 at 03:20
One more thing: all the styles used in my sample code are located in the `` section of `MainWindow`. I see you're placing your styles in the ``. In that case please verify that `(Style)Resources["MessageBoxStyle1"]` is actually returning a valid, not null resource. — jsanalytics, Apr 27 '16 at 10:41
Specifically, in that case you have to use `(Style)App.Current.Resources["MessageBoxStyle1"]` instead. — jsanalytics, Apr 27 '16 at 10:46
@daniel : set `ButtonRegionBackground` to `Transparent` or any other color you want. — jsanalytics, Apr 18 '17 at 15:56

WPF - Customize the style of MessageBox in Extended WPF Toolkit

1 Answers1