MahApps / MahApps.Metro

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.
https://mahapps.com
MIT License
9.28k stars 2.45k forks source link

Data bound menu losing colors on the first level? #252

Closed chandramouleswaran closed 11 years ago

chandramouleswaran commented 11 years ago

If you look at the image, you can see that the first level items alone miss colors. The sub level items follow the style.

Menu issue

I have a main menu which is databound like this

<Menu Grid.Row ="0" IsMainMenu="True"  x:Name="mainMenu" Style="{StaticResource StandardMenu}" VerticalAlignment="Top" ItemsSource="{Binding Menus}" ItemContainerStyle="{StaticResource CommandMenuItemStyle}" />

My CommandMenuItemStyle which is based on MetroMenuItem looks like this

<Style x:Key="CommandMenuItemStyle" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MetroMenuItem}">
   <Setter Property="Header" Value="{Binding Path=Menu.Header}"/>
   <Setter Property="Command" Value="{Binding Path=Menu.Command}"/>
   <Setter Property="ItemsSource" Value="{Binding Path=Items}"/>
   <Setter Property="IsChecked" Value="{Binding Path=Menu.IsChecked}"/>
   <Setter Property="IsCheckable" Value="{Binding Path=Menu.IsCheckable}"/>
</Style>

I have the following in my resource dictionary (included the VS Styles)

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/VS/Colours.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/VS/Styles.xaml"/>
ghost commented 11 years ago

Redo your code so it uses proper markdown codeblocks, 'cause its too difficult to read.

chandramouleswaran commented 11 years ago

Updated. Please let me know if you need more info - the first level of the "Edit" menu also has the same problem.

ghost commented 11 years ago

VS colours/styles aren't really supported. If you take that out, does it 'solve' the issue? I know thats not idea, but at least helps narrow down the cause.

chandramouleswaran commented 11 years ago

It is a part of the package and therefore thought it would be supported. It works well without the VS2012 styles - any idea why VS2012 theme fails for binding?

ghost commented 11 years ago

If its not in the documentation, its not 'supported' by me. People have (awesomely) contributed the VS styling, but unfortunately (for me) I don't know the styling very well so I can't tell you where/whats going wrong.

At a guess, LightBackground and Background in the VS style aren't 'solids', so as things are getting deeper and deeper inside nested backgrounds, the backgrounds are overwhelming.

Does VS show any errors in the output window? (Make sure all WPF debugging is set to info/warning, rather than the default 'off')

chandramouleswaran commented 11 years ago

Not sure what you mean by they aren't solids.

<SolidColorBrush x:Key="Background" Color="#1C1C1C"/>
<SolidColorBrush x:Key="LightBackground" Color="#2D2D30"/>

Output of warnings - Not sure if the warnings are helpful.

DEBUG: Setting the RegionManager.. Priority: Low. Timestamp:2012-12-22 23:48:05Z.
DEBUG: Updating Regions.. Priority: Low. Timestamp:2012-12-22 23:48:05Z.
DEBUG: Initializing the shell.. Priority: Low. Timestamp:2012-12-22 23:48:05Z.
DEBUG: Initializing modules.. Priority: Low. Timestamp:2012-12-22 23:48:05Z.
'HyperStudio.vshost.exe' (Managed (v4.0.30319)): Loaded 'E:\Visual Studio 2012\HyperStudio\Src\HyperStudio\bin\Debug\Internals\HyperStudio.Tools.Logger.dll', Symbols loaded.
'HyperStudio.vshost.exe' (Managed (v4.0.30319)): Loaded 'E:\Visual Studio 2012\HyperStudio\Src\HyperStudio\bin\Debug\Internals\HyperStudio.Core.dll', Symbols loaded.
DEBUG: Bootstrapper sequence completed.. Priority: Low. Timestamp:2012-12-22 23:48:05Z.
'HyperStudio.vshost.exe' (Managed (v4.0.30319)): Loaded 'C:\WINDOWS\Microsoft.Net\assembly\GAC_MSIL\PresentationFramework-SystemXml\v4.0_4.0.0.0__b77a5c561934e089\PresentationFramework-SystemXml.dll'
'HyperStudio.vshost.exe' (Managed (v4.0.30319)): Loaded 'C:\WINDOWS\Microsoft.Net\assembly\GAC_MSIL\PresentationFramework-SystemXmlLinq\v4.0_4.0.0.0__b77a5c561934e089\PresentationFramework-SystemXmlLinq.dll'
Attach()
'HyperStudio.vshost.exe' (Managed (v4.0.30319)): Loaded 'C:\WINDOWS\Microsoft.Net\assembly\GAC_MSIL\PresentationFramework-SystemData\v4.0_4.0.0.0__b77a5c561934e089\PresentationFramework-SystemData.dll'
'HyperStudio.vshost.exe' (Managed (v4.0.30319)): Loaded 'C:\WINDOWS\Microsoft.Net\assembly\GAC_MSIL\PresentationFramework-SystemCore\v4.0_4.0.0.0__b77a5c561934e089\PresentationFramework-SystemCore.dll'
System.Windows.Data Error: 40 : BindingExpression path error: 'IsFloating' property not found on 'object' ''LayoutAnchorablePane' (HashCode=44673241)'. BindingExpression:Path=Model.IsFloating; DataItem='LayoutAnchorablePaneControl' (Name=''); target element is 'LayoutAnchorablePaneControl' (Name=''); target property is 'NoTarget' (type 'Object')
System.Windows.Data Error: 1 : Cannot create default converter to perform 'one-way' conversions between types 'AvalonDock.Layout.LayoutContent' and 'AvalonDock.Layout.LayoutAnchorable'. Consider using Converter property of Binding. BindingExpression:Path=Model.SelectedContent; DataItem='LayoutAnchorablePaneControl' (Name=''); target element is 'AnchorablePaneTitle' (Name=''); target property is 'Model' (type 'LayoutAnchorable')
System.Windows.Data Error: 40 : BindingExpression path error: 'Model' property not found on 'object' ''LayoutAnchorable' (HashCode=15384696)'. BindingExpression:Path=Model.IsSelected; DataItem='LayoutAnchorable' (HashCode=15384696); target element is 'LayoutAnchorableTabItem' (Name=''); target property is 'NoTarget' (type 'Object')
System.Windows.Data Error: 40 : BindingExpression path error: 'View' property not found on 'object' ''LayoutAnchorableItem' (Name='')'. BindingExpression:Path=LayoutItem.View; DataItem='LayoutAnchorableControl' (Name=''); target element is 'ContentPresenter' (Name=''); target property is 'Content' (type 'Object')
'HyperStudio.vshost.exe' (Managed (v4.0.30319)): Loaded 'C:\WINDOWS\Microsoft.Net\assembly\GAC_MSIL\UIAutomationProvider\v4.0_4.0.0.0__31bf3856ad364e35\UIAutomationProvider.dll', Skipped loading symbols. Module is optimized and the debugger option 'Just My Code' is enabled.
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='File'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='File'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Open'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Open'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Close'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Close'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='OpenServ'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='OpenServ'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='OpenServ1'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='OpenServ1'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='OpenServ2'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='OpenServ2'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='openFile'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='openFile'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Edit'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Edit'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
The thread 'Splash Thread' (0x17fc) has exited with code 0 (0x0).
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Cut'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Cut'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Copy'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Copy'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Paste'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Paste'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Sep1'); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name='Sep1'); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
chandramouleswaran commented 11 years ago

Looks like its not a problem ONLY for VS Styles but also for BaseDark.xaml

ghost commented 11 years ago

Nope. Demo project works fine on the dark theme for nested MenuItems.

ghost commented 11 years ago

You'll need to provide a full repro for this to be investigated as per bug reporting guidelines (see project home)

chandramouleswaran commented 11 years ago

Your menu is not data bound like the sample provided above.

ghost commented 11 years ago

There is no sample above, but a few snippets. As I said, provide a full repro.

chandramouleswaran commented 11 years ago

Here is the complete source code of the problem that I am talking about. http://sdrv.ms/W5uJpY

chandramouleswaran commented 11 years ago

Closing as its not a bug in MahApps.

chandramouleswaran commented 11 years ago

This is not an issue with data bound menus in VS Style alone - this is an issue with Menu's in general irrespective of the style you use.

I added the following lines to the MetroDemo solution's MainWindow.xaml

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="25"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Menu Grid.Row="0">
                <MenuItem Header="_File">
                    <MenuItem Header="_Open">
                        <MenuItem Header="_Open File" />
                        <MenuItem Header="Open _Serv">
                            <MenuItem Header="Open Serv _1" />
                            <Separator />
                            <MenuItem Header="Open Serv _2" />
                        </MenuItem>
                    </MenuItem>
                    <MenuItem Header="_Close" />
                </MenuItem>
                <MenuItem Header="_Edit">
                    <MenuItem Header="_Cut" />
                    <MenuItem Header="C_opy" />
                    <MenuItem Header="_Paste" />
                </MenuItem>
            </Menu>
            <TabControl Grid.Row="1">

And here are the screenshots dark green

There are 3 issues with the screenshot

  1. Menu is not styled - (looking at the source it is not). Only menu item is styled in Controls.xaml.
  2. First level menu's do not work have right colors (Both Dark and Light theme) light theme Notice that in the above 2 screenshots first level menu's do not look nice. Both themes have background and border issues.
  3. Separator looks odd (both in menu and context menu)

context menu dark green

Suggestions

  1. Style Menu and add it to Controls..xaml
  2. Make menu item theme correctly for both context menu and regular menu's.
  3. Separator needs to be theme'd correctly as well.
ghost commented 11 years ago

You closed it as it wasn't a bug in MA.M, then reopened it. Which is it?

No, menu is not styled. Menus in general aren't very... metro-like in the actual UX. I'm not going to spend my time on that particular one, but you're welcome to/PRs will be accepted.

chandramouleswaran commented 11 years ago

It is a bug because, you have styled menu item alone which is going to be used in both context menu's and regular menus. Also, there is an issue with the separator.

I closed the original thread thinking there was something wrong with my code - but looks like the problem was because of 2 things

  1. "Menu" was not styled.
  2. "MenuItem" is missing, the TopLevelHeaderTemplate content template
<!-- TopLevelHeader -->
    <ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey}" TargetType="MenuItem">

You can say its not metro-like, but having a style'd menu would attract more people to use MA.M for regular VS like apps.

I am new to Git in general - how do I submit my changes to the repository?

chandramouleswaran commented 11 years ago

https://github.com/MahApps/MahApps.Metro/pull/297