XAML/WPF - setting property items correctly in a style so that background colours and alignment work correctly

This is the general code for my menu.

<Menu Grid.Column="0">
            <MenuItem Header="_File">
                <MenuItem.Icon>
                    <Viewbox>
                        <ContentPresenter ContentTemplate="{StaticResource icon-file}"/>
                    </Viewbox>
                </MenuItem.Icon>
                <MenuItem x:Name="MenuFileExit" Header="_Exit">
                    <MenuItem.Icon>
                        <Viewbox>
                            <ContentPresenter ContentTemplate="{StaticResource icon-close-window}"/>
                        </Viewbox>
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>

Open in new window


I've also got a resource set in my app.xaml file.

    <Application.Resources>
        <ResourceDictionary>
            <FontFamily x:Key="Lato">pack://application:,,,/Fonts/#LATO</FontFamily>
            <Style TargetType="MenuItem">
                <Setter Property="Background" Value="Bisque" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{StaticResource Lato}"/>
                <Setter Property="FontSize" Value="14"/>
            </Style>
        </ResourceDictionary>
    </Application.Resources>

Open in new window


I've used the weird colour so you can see one of the issues.

Non-centred text on menu
Firstly, the text in the top level items doesn't seem to be vertically aligned as set in the resource - am I referring to the property incorrectly?
Secondly, the icons seem to be vertically aligned to the bottom - do I need to refer to "icons" somehow within my resource?
Lastly, if you see the "About" item, the background colour doesn't fill the drop down properly.

Also attached the icons.xaml file where all the resources are.

Any guidance would be appreciated.
icons.xaml
Matt CartlidgeSenior Infrastructure EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
There's nothing obviously wrong with your code, but you might want to post more info, such as the icon-file and icon-close-window resource. You also talk about the About item, but there's nothing in your code that refers to an About item, and no screen shot was attached, so we're left guessing.
0
Matt CartlidgeSenior Infrastructure EngineerAuthor Commented:
Apologies, I forgot to upload the example image. My original post has been edited and I've attached the icons.xaml file where my resources are. It is worth noting that icon-file is not a file, it's an image representing a file icon.
0
Chris StanyonWebDevCommented:
OK. That makes more sense now.

Given the code that you've posted, I can't see why the text and icon are mis-aligned. I've used your code as-is and it looks fine. I set the height of the menu items to 50px just to exagerate any problems and it came out OK. Is it possible that you have some additional styling applied to one of the inner elements, such as TextBox, or a Grid - maybe a padding or margin. My screen shot is attached.

As for the About item not filling the available space, you need to set the HorizonalAlignment to Stretch, not Left:

<Style TargetType="MenuItem">
    ...
    <Setter Property="HorizontalAlignment" Value="Stretch" />

Open in new window

screenshot.png
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Matt CartlidgeSenior Infrastructure EngineerAuthor Commented:
Thanks for the tip, the "stretch" works great.

I've sort of found the issue with the alignment. It only works if I explicitly set the MenuItem.Header property for each MenuItem.

<MenuItem>
                    <MenuItem.Header>
                        <TextBlock Text="File" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                    </MenuItem.Header>
                    <MenuItem.Icon>
                        <Viewbox>
                            <ContentPresenter ContentTemplate="{StaticResource icon-file}"/>
                        </Viewbox>
                    </MenuItem.Icon>

Open in new window


Is there a way to set the MenuItem.Header properties in the Style resource within my app.xaml?

To answer your other question. Yes, my menu item is within a DockPanel within a Grid. However, they don't have any alignment properties set and I've also removed them to get the same result with the alignment.
0
Chris StanyonWebDevCommented:
Hey Matt,

Not sure about applying the styles within App.xaml. You would probably need to set up a full template for the MenuItem and define the styles for the header within that template.

Really don't know why your alignment is off. It worked as it should when I tried it in a clean project, which I why I though it might be some other styling that's applied elsewhere.

Not really sure what else to suggest
0
Matt CartlidgeSenior Infrastructure EngineerAuthor Commented:
Hi Chris, thanks your input. I will close this off for now and continue troubleshooting the issue by doing what you have suggested.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WPF

From novice to tech pro — start learning today.