C# WPF: Wie bringe ich hier ein Icon unter (Content des MenuItems)?

1 Antwort

MenuItem-Komponenten haben ein Property IsCheckable. Wenn es auf True gesetzt wird, wird in ihm auch schon eine Checkbox angezeigt.

Leider ist das Standardverhalten trotzdem wohl noch nicht das, was du haben möchtest. Ein gesetztes Icon wird zwar angezeigt, teilt sich seinen Platz aber mit der Checkbox. Wenn man das Item anhakt, wird das Icon also durch die Checkbox verdeckt.

Du müsstest den Style der Komponente überschreiben, um den Aufbau selbst vorgeben zu können. Ich zeige folgend ein primitives Beispiel, um das Prinzip dahinter aufzuzeigen.

Der Style wird am besten als statische Ressource definiert, bspw. unter Window.Resources:

<Style TargetType="{x:Type MenuItem}" x:Key="CheckbableMenuItemWithImage">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type MenuItem}">
        <Grid Background="{TemplateBinding Background}">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40*" />
            <ColumnDefinition Width="30*" />
            <ColumnDefinition Width="30*" />
          </Grid.ColumnDefinitions>
          <ContentPresenter ContentSource="Icon" Height="16" Width="16" x:Name="Icon" />
          <CheckBox Grid.Column="1" IsChecked="{TemplateBinding IsChecked}" />
          <TextBlock Grid.Column="2" Text="{TemplateBinding Header}" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Er überschreibt das Template des MenuItem, welches mittels eines dreispaltigen Grids lediglich die drei wichtigsten Komponenten anordnet: Icon, Checkbox und Itemtext. Alle drei Komponenten werden an die jeweiligen Properties (Icon, IsChecked, Header) gebunden, andernfalls würden sie für die konkreten Komponenten, die diesen Style nutzen, nicht mehr funktionieren.

Um den Style der Komponente zuzuordnen, wird deren Style-Attribut an die statische Ressource gebunden.

<MenuItem Header="Example" IsCheckable="True" Style="{StaticResource CheckbableMenuItemWithImage}">
  <MenuItem.Icon>
    <Image Source="..." />
  </MenuItem.Icon>
</MenuItem>

In der Microsoft Dokumentation findest du mehr Informationen zu dem tatsächlichen Aufbau des MenuItem-Templates. Die kannst du als Grundlage für eine bessere Lösung nutzen.