Set the Width and Height of all Images, which are in a MenuItem.Icon

Question

Like most people I'm using icons for my MenuItems. I want all of these images to be displayed as 16x16 px icons. Most of the source images have that format, some may be 32x32, but all of them are slightly scaled (to 18x18 or so).

I've tried this, but it doesn't affect the icons (if this is horrible coding, please notify me. I'm new to xaml.):

<Style TargetType="MenuItem">
    <Setter Property="Padding" Value="6,3" />
    <Setter Property="Height" Value="22" />
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="Image">
                <Setter Property="Height" Value="16" />
                <Setter Property="Width" Value="16" />
            </Style>
        </Setter.Value>
    </Setter>
</Style>

Clemens · Answer 1 · 2012-10-07T12:27:21.667

2

I guess that setting a Style with TargetType="Image" for a Menu's ItemContainerStyle property does not make much sense. There is no need at all to set the ItemContainerStyle. Just use a style that fixes the height of each MenuItem. The icon images will then be scaled automatically.

<Style TargetType="MenuItem">
    <Setter Property="Height" Value="22" />
</Style>

Then set the Icon property to some image, perhaps with a small value for the image's Margin.

<MenuItem Header=... >
    <MenuItem.Icon>
        <Image Margin="2" Source=... />
    </MenuItem.Icon>
</MenuItem>

If you really need to fix the image size to a certain value, simply set the Image's Width and Height property.

<MenuItem Header=... >
    <MenuItem.Icon>
        <Image Width="16" Height="16" Source=... />
    </MenuItem.Icon>
</MenuItem>

edited Oct 07 '12 at 12:27

answered Oct 05 '12 at 19:23

Clemens

123,504
12
155
268

Since they're different dimensions, I would embed the Image into a ViewBox to retain resolution and set your Height/Width restrictions to it instead, +1 – Chris W. Oct 05 '12 at 19:27
`` That is exactly what I want gone. I want these width and height properties automatically set for each `Image`, which is used as the value of a `MenuItem.Icon` property in all my application's windows. – dialer Oct 05 '12 at 19:33
@dialer Ok, then simply fix the MenuItem height and let the Image be sized automatically. – Clemens Oct 05 '12 at 19:58

score 0 · Accepted Answer · edited May 23 '17 at 11:48

After browsing for quite a while, I came across the keyword "nested style", which yielded https://stackoverflow.com/a/4078275/653473 after some google searches.

<Style TargetType="MenuItem">
    <Setter Property="Padding" Value="6,3" />
    <Setter Property="Height" Value="22" />
    <Style.Resources>
        <Style TargetType="Image">
            <Setter Property="Height" Value="16" />
            <Setter Property="Width" Value="16" />
        </Style>
    </Style.Resources>
</Style>

Set the Width and Height of all Images, which are in a MenuItem.Icon

2 Answers2