Wie mache ich benutzerdefinierte MenuHeaders in WPF mit Beschleunigern?

Question

Ich möchte einige benutzerdefinierte MenuHeaders in WPF erstellen, damit ich beispielsweise ein Symbol und Text in einem Menüelement haben kann.

Wenn Sie bei der Verwendung von MenuItems das Header-Feld mit einem geraden Text füllen, können Sie unter Verwendung eines Unterstrichs einen Beschleuniger hinzufügen. zB _File

Wenn ich jedoch ein UserControl einfügen wollte, glaube ich, dass diese Funktion kaputt gehen würde, wie würde ich etwas ähnliches wie folgt tun?

Answer 1

Ich denke die Icon Eigenschaft passt zu Ihren Bedürfnissen.
Um jedoch die ursprüngliche Frage zu beantworten, ist es möglich, die Accelerator-Funktionalität beizubehalten, wenn Sie den Inhalt Ihres Menüelements verfassen. Wenn Sie Inhalt in einem MenuItem verschachtelt haben, müssen Sie die AccessText-Eigenschaft wie im ersten unten explizit definieren. Wenn Sie das Inline-Formular verwenden, wird dies automatisch erledigt.

<Menu> 
    <MenuItem> 
     <MenuItem.Header> 
     <StackPanel Orientation="Horizontal"> 
      <Image Source="Images/Open.ico" />  
      <AccessText>_Open..</AccessText> 
     </StackPanel> 
     </MenuItem.Header> 
    </MenuItem> 
    <MenuItem Header="_Close" /> 
    </Menu> 

Answer 2

Das Problem besteht darin, dass Sie das Bild innerhalb des Inhalts des MenuHeaders platziert haben, was bedeutet, dass Sie den Zugriffsschlüssel verlieren. Wenn Sie nur versuchen, ein Bild in der Menüüberschrift zu erstellen, gehen Sie folgendermaßen vor.

<MenuItem Header="_Open"> 
    <MenuItem.Icon> 
    <Image Source="images/Open.png"/> 
    </MenuItem.Icon> 
</MenuItem> 

Wenn Sie das Aussehen und das Gefühl noch weiter anpassen möchten, ändern Sie die controltemplate und Stil für das Menü. Aus Erfahrung ist das Formatieren der Menüs und Menüelemente schwieriger als das Formatieren der anderen WPF-Steuerelemente.

Answer 3

@ a7an: Ah, ich habe die Icon-Eigenschaft vorher nicht bemerkt. Das ist ein guter Anfang.

Allerdings wollte ich speziell einigen MenuItems einen zusätzlichen 'Button' hinzufügen, so dass ich eine 'Pin'-Funktion haben könnte (siehe die kürzlich geladene Dokumentenliste in Office 2007 für die Feature-Idee).

Da es auch Code geben muss, muss ich wahrscheinlich das Steuerelement unterklassieren und den Code für die Schaltfläche hinzufügen? (Keine Angst davor, mit der MenuItem Vorlage herumzuspielen, musste es schon einmal machen und ich würde es nochmal machen wenn ich müsste!;))

Answer 4

Zuerst dachte man, dass die Icon-Eigenschaft nur ein Bild enthalten kann. Aber es kann tatsächlich alles enthalten! Ich entdeckte dies zufällig, als ich programmgesteuert versuchte, die Image-Eigenschaft direkt auf eine Zeichenfolge mit dem Pfad zu einem Bild festzulegen. Das Ergebnis war, dass das Bild nicht angezeigt wurde, sondern der eigentliche Text des Pfades! Dann entdeckte ich, dass ich zuerst ein Image-Element erstellen und dieses auf die Icon-Eigenschaft setzen musste. Dies führte mich zu der Annahme, dass die Image-Eigenschaft nur ein Inhaltscontainer war, der sich im Symbolbereich links im Menü befindet, und ich hatte recht. Ich habe versucht, einen Knopf zu drücken, und es hat funktioniert!

Dies zeigt eine Schaltfläche mit dem Text "i" im Icon-Bereich des Menüpunktes. Wenn Sie auf die Schaltfläche klicken, wird das Ereignis Button_Click ausgelöst (das LanguageMenu_Click wird NICHT ausgelöst, wenn Sie auf die Schaltfläche klicken).

<MenuItem Name="LanguageMenu" Header="_Language" Click="LanguageMenu_Click"> 
    <MenuItem.Icon> 
    <Button Click="Button_Click">i</Button> 
    </MenuItem.Icon> 
</MenuItem> 

Dies führt zu einer Alternative zu haben, um nicht ein Bild für das Symbol zu machen, aber Text mit einer Symbolschriftart zu verwenden, anstatt ein einfaches „Symbol“ angezeigt werden soll. Im folgenden Beispiel wird die Wingdings-Schriftart verwendet, die ein floppydisk-Symbol enthält. Dieses Symbol in der Schriftart ist dem Zeichen < zugeordnet, das in XAML eine besondere Bedeutung hat. Daher müssen wir stattdessen die codierte Version < verwenden. Das funktioniert wie ein Traum!Im Folgenden wird ein Floppydisk Symbol als Symbol auf dem Menüpunkt:

<MenuItem Name="mnuFileSave" Header="Save" Command="ApplicationCommands.Save"> 
    <MenuItem.Icon> 
    <Label VerticalAlignment="Center" HorizontalAlignment="Center" 
      FontFamily="Wingdings">&lt;</Label> 
    </MenuItem.Icon>     
</MenuItem>