• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 67
  • Last Modified:

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
0
Matt Cartlidge
Asked:
Matt Cartlidge
  • 3
  • 3
3 Solutions
 
Chris StanyonCommented:
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 StanyonCommented:
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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 StanyonCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now