Customizing Mahapps.MetroWindow Schaltfläche Schließen

Ich bin mit Mahapps.MetroWindow ( http://mahapps.com/ ), um Stil meine Anwendungen Aussehen und jetzt bin ich auf der Suche für den richtigen Weg, um das Aussehen der X - /Auswurf-Taste. Standardmäßig MetroWindow gilt custom-styling für alle drei Befehlsschaltflächen. Ich möchte entweder match in Windows immer mit dem Schließen-button rot oder bei mouseover rot werden.

Was ich gefunden habe bisher war, dass ich das einstellen kann WindowCloseButtonStyle - Attribut, um eine benutzerdefinierte Stil. Ich Tat also so aus:

<controls:MetroWindow x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    Title="MainWindow" 
    Height="350" 
    Width="525"
    WindowCloseButtonStyle="{DynamicResource RedCloseWindowButtonStyle}">
...

In einem separaten XAML-Datei habe ich noch den style definiert als

<Style x:Key="RedCloseWindowButtonStyle"
       TargetType="{x:Type Button}"
       BasedOn="{StaticResource MetroBaseWindowButtonStyle}">
    <Setter Property="XXX"
               Value="XXX" />
</Style>

Ich davon ausgehen, dass ich ' ll haben, um die Lücken zu füllen für XXX in die Stil-setter. Da bin ich neu, um die Windows-Entwicklung meine Frage ist: Was ist die Eigenschaft an der ich interessiert bin? Wo finde ich ein explorer-durchsuchen Sie die verfügbaren Eigenschaften in Abhängigkeit von den gegebenen Kontext? und was ist der Stil Wert, wenn ich will, zu erreichen, was ich oben beschrieben habe?

  • Sie können download XAMLSpy und installieren Sie es. Sobald es installiert ist, führen Sie Ihre app aus und XAMLSpy zusammen. Sie befestigen kann XAMLSpy zu Ihrer app und entdecken Sie die Elemente und Ihre Eigenschaften.
  • Ich kann mir vorstellen was du suchst, ist Vordergrund, aber Sie können Sie verwenden, etwas anderes. XAMLSpy lassen Sie die Maus über die Elemente, während in Visual Studio und finden Sie Ihre Inhalte und Eigenschaften.
InformationsquelleAutor pkluz | 2014-05-20
  1. 5

    Hier ist eine geerbte benutzerdefinierte Formatvorlage für einen button zum schließen mit der Maus über /gepresst Wirkung:

    <Style x:Key="MetroWindowCloseButtonStyle"
       TargetType="{x:Type Button}"
       BasedOn="{StaticResource MetroWindowButtonStyle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="grid"
                      Background="{TemplateBinding Background}">
                    <ContentPresenter x:Name="contentPresenter"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      RecognizesAccessKey="True"
                                      Opacity="0.75" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter TargetName="contentPresenter"
                                Property="Opacity"
                                Value="1" />
                        <Setter TargetName="grid"
                                Property="Background"
                                Value="#E04343" />
                    </Trigger>
                    <Trigger Property="IsMouseOver"
                             Value="False">
                        <Setter TargetName="contentPresenter"
                                Property="Opacity"
                                Value=".5" />
                    </Trigger>
                    <Trigger Property="IsPressed"
                             Value="True">
                        <Setter TargetName="grid"
                                Property="Background"
                                Value="#993D3D" />
                    </Trigger>
                    <Trigger Property="IsEnabled"
                             Value="false">
                        <Setter Property="Foreground"
                                Value="#ADADAD" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

    Das original (veraltet) Stil finden Sie hier auf GitHub

    Hoffe, das hilft.

    • Genial, danke! Genau das, was ich brauchte!
    • Super!!! Danke!!! Ich war auf der Suche für 2 Tage
    • 404 auf dem link zum github-link
    • Ich ersetzt den link mit den korrekten permalink zu den Quellen.
    InformationsquelleAutor punker76
  2. 1

    Gut, In der neuen version von I dont find den style "MetroWindowCloseButtonStyle"
    Ich habe neu geschrieben, der Stil "MetroBaseWindowButtonStyle"
    mit und extra-style-trigger:
    Der trigger wird nur ausgelöst, wenn der name der Schaltfläche ist "PART_Close", das ist die Standard-mahapp-Taste name. So wird es ändern die hintergrund-Farbe auf rot, wenn hover zu schließen-Schaltfläche.

    <MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="IsMouseOver" Value="True" />
    <Condition Property="Name" Value="PART_Close" />
  </MultiTrigger.Conditions>

  <Setter Property="Background" Value="Red" />
</MultiTrigger>

    Den kompletten Stil ist hier:

     <!-- base button style for min, max and close window buttons -->
 <Style x:Key="MetroBaseWindowButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background"
            Value="{DynamicResource TransparentWhiteBrush}" />
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Padding"
            Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter x:Name="contentPresenter"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      RecognizesAccessKey="True"
                                      Opacity="0.75" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter TargetName="contentPresenter"
                                Property="Opacity"
                                Value="1" />
                    </Trigger>
                    <Trigger Property="IsMouseOver"
                             Value="False">
                        <Setter TargetName="contentPresenter"
                                Property="Opacity"
                                Value=".5" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver"
                 Value="True">
            <Setter Property="Background"
                    Value="#F6F6F6" />
        </Trigger>
        <Trigger Property="IsPressed"
                 Value="True">
            <Setter Property="Background"
                    Value="{DynamicResource HighlightBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled"
                 Value="false">
            <Setter Property="Foreground"
                    Value="#ADADAD" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver"
                           Value="True" />
                <Condition Property="Name"
                           Value="PART_Close" />
            </MultiTrigger.Conditions>
            <Setter Property="Background"
                    Value="Red" />
        </MultiTrigger>
    </Style.Triggers>
  </Style>
    InformationsquelleAutor Dipu Raj
  3. 0

    Setzen Sie die folgenden in der App.xaml wird ein rot-mouse-over-Stil, um alle MetroWindows:

    <Style x:Key="CleanCloseWindowButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource MetroWindowButtonStyle}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#EB2F2F" />
            <Setter Property="Foreground" Value="{DynamicResource WhiteBrush}" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="#7C0000" />
        </Trigger>
    </Style.Triggers>
</Style>

<Style TargetType="{x:Type mah:WindowButtonCommands}" BasedOn="{StaticResource {x:Type mah:WindowButtonCommands}}">
    <Setter Property="LightCloseButtonStyle" Value="{StaticResource CleanCloseWindowButtonStyle}" />
    <Setter Property="DarkCloseButtonStyle" Value="{StaticResource CleanCloseWindowButtonStyle}" />
</Style>

    Grundlage war eine Lösung geschrieben von Punker auf github mit der WindowCloseButtonStyle (veraltet).

    InformationsquelleAutor KornMuffin
Schreibe einen Kommentar