我有manualy创建了一个MenuItem。现在我希望它作为模板/样式资源/控制模板 - 无论这个任务最好的是什么。
我的MenuItem看起来像这样(我知道短代码):
<MenuItem
x:Name="Quit" << OUTSIDE TEMPLATE
Command="{Binding ShutdownCommand}"> << OUTSIDE TEMPLATE
<MenuItem.Header>
<StackPanel
Orientation="Horizontal">
<TextBlock
Width="150"
Text="Quit ERD Builder"/> << OUTSIDE TEMPLATE
<TextBlock
Width="80"
Margin="0,2,0,0"
TextAlignment="Right">
<Border
Padding="4,0,4,0"
BorderBrush="#B0B0B0"
Background="#fff"
BorderThickness="1"
CornerRadius="6">
<TextBlock
Width="Auto"
Text="Alt+F4" << OUTSIDE TEMPLATE
FontSize="10"
Foreground="#555" />
</Border>
</TextBlock>
</StackPanel>
</MenuItem.Header>
<MenuItem.Icon>
<Image
Width="16"
Height="16"
Margin="0,0,5,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality"
SnapsToDevicePixels="True">
<Image.Source>
<BitmapImage
UriSource="/ERDBuilder;component/icons/bw/102-walk.png" /> << OUTSIDE TEMPLATE
</Image.Source>
</Image>
</MenuItem.Icon>
我用<< OUTSIDE TEMPLATE
声明的行是我想在MenuItem中声明的行而不是Template
中的行。
我已经尝试了一些样式但是“背景”例如不会因某些原因而工作。我可以更改“FontSize”但不能更改“背景”颜色:
<Style
x:Key="TopTaskBarMenuitem"
TargetType="MenuItem">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#ffff00" /> << DONT WORK
<Setter Property="FontSize" Value="20" /> << WORKS
</Trigger>
</Style.Triggers>
<Setter Property="Foreground" Value="#000" /> << WORKS
<Setter Property="BorderThickness" Value="1" /> << WORKS
<Setter Property="Width" Value="150"/> << WORKS
如果我手动“XAML”,这就是菜单的样子:
Manualy created Menuitem(我不允许在此处上传图片?!)
这是具有静态样式资源的菜单项:
如您所见,“背景”颜色不会影响菜单项。
如果我希望我在“菜单项目”中能够拥有这样的东西 - 侧面:
<MenuItem
Style="{StaticResource TopTaskBarMenuitem}" << TEMPLATE / STYLE BINDING
x:Name="Quit" << OUTSIDE TEMPLATE
Command="{Binding ShutdownCommand}" << OUTSIDE TEMPLATE
MyHeaderText="Quit ERD Builder"/> << OUTSIDE TEMPLATE
MyShortcutText="Alt+F4" << OUTSIDE TEMPLATE
MyUriSource="/ERDBuilder;component/icons/bw/102-walk.png" /> << OUTSIDE TEMPLATE
非常感谢他们所有人的帮助!
PS:此处所有三个代码发布都缺少最后一个代码行。我不知道为什么。我无法解决这个问题。
德克
答案 0 :(得分:2)
要获得此功能,您必须创建从MenuItem派生的自己的控件。
您需要做的就是使用DependencyProperties创建控件类以充分利用它的所有好处,请阅读this以获取更多信息:
namespace MyControls
{
class MyMenuItem : MenuItem
{
public string MyHeaderText
{
get { return (string)GetValue(MyHeaderTextProperty); }
set { SetValue(MyHeaderTextProperty, value); }
}
public static readonly DependencyProperty MyHeaderTextProperty = DependencyProperty.Register("MyHeaderText", typeof(string), typeof(MyMenuItem));
public string MyShortcutText
{
get { return (string)GetValue(MyShortcutTextProperty); }
set { SetValue(MyShortcutTextProperty, value); }
}
public static readonly DependencyProperty MyShortcutTextProperty = DependencyProperty.Register("MyShortcutText", typeof(string), typeof(MyMenuItem));
public string MyUriSource
{
get { return (string)GetValue(MyUriSourceProperty); }
set { SetValue(MyUriSourceProperty, value); }
}
public static readonly DependencyProperty MyUriSourceProperty = DependencyProperty.Register("MyUriSource", typeof(string), typeof(MyMenuItem));
}
}
现在您可以实例化您的控件,但您仍然需要“重新模板化”它:
<mc:MyMenuItem MyHeaderText="Quit ERD Builder" MyShortcutText="Alt+F4" MyUriSource="/ERDBuilder;component/icons/bw/102-walk.png">
<mc:MyMenuItem.Style>
<Style TargetType="mc:MyMenuItem">
<Style.Setters>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Width="150" Text="{Binding Mode=TwoWay, Path=MyHeaderText, RelativeSource={RelativeSource FindAncestor, AncestorType=mc:MyMenuItem}}"/>
<TextBlock Width="80" Margin="0,2,0,0" TextAlignment="Right">
<Border Padding="4,0,4,0" BorderBrush="#B0B0B0" Background="#fff" BorderThickness="1" CornerRadius="6">
<TextBlock Width="Auto" Text="{Binding Mode=TwoWay, Path=MyShortcutText, RelativeSource={RelativeSource FindAncestor, AncestorType=mc:MyMenuItem}}" FontSize="10" Foreground="#555" />
</Border>
</TextBlock>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Icon">
<Setter.Value>
<Image Width="16" Height="16" Margin="0,0,5,0" HorizontalAlignment="Center" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" Source="{Binding Mode=OneWay, Path=MyUriSource, RelativeSource={RelativeSource FindAncestor, AncestorType=mc:MyMenuItem}}" />
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</mc:MyMenuItem.Style>
</mc:MyMenuItem>
不要忘记在窗口中引用此新控件的命名空间(或者您可能放置此控件的任何位置)标记:
xmlns:mc="clr-namespace:MyControls"
可以在ResourceDictionary中插入此样式,因此每次使用此控件时都不需要引用它。
<Style TargetType="mc:MyMenuItem">
<!-- Style comes here -->
</Style>
然后你可以获得你的要求:
<mc:MyMenuItem MyHeaderText="Quit ERD Builder" MyShortcutText="Alt+F4" MyUriSource="/ERDBuilder;component/icons/bw/102-walk.png" />
我希望它可以帮助你!
答案 1 :(得分:0)
模板/样式中的部分:
<Setter Property="Icon">
<Setter.Value>
<ctrl:Bitmap>
<ctrl:Bitmap.Source>
<!-- This doesnt work: --> <BitmapImage UriSource="{Binding Mode=OneWay, Path=MenuIcon, RelativeSource={RelativeSource FindAncestor, AncestorType=ctrl:MainMenuItem}}" />
<!-- This Still works fine: <BitmapImage UriSource="../Resources/Icons/16/page_add.png" />-->
</ctrl:Bitmap.Source>
</ctrl:Bitmap>
</Setter.Value>
</Setter>
从MenuItem派生的Custom Control类:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace ErdBuilder.Shell.Controls
{
class MainMenuItem : MenuItem
{
public ICommand MenuCommand
{
get { return (ICommand) GetValue(MenuCommandProperty); }
set { SetValue(MenuCommandProperty, value); }
}
public static readonly DependencyProperty MenuCommandProperty = DependencyProperty.Register("MenuCommand", typeof(ICommand), typeof(MainMenuItem));
public string MenuText
{
get { return (string)GetValue(MenuTextProperty); }
set { SetValue(MenuTextProperty, value); }
}
public static readonly DependencyProperty MenuTextProperty = DependencyProperty.Register("MenuText", typeof(string), typeof(MainMenuItem));
public string MenuShortcut
{
get { return (string)GetValue(MenuShortcutProperty); }
set { SetValue(MenuShortcutProperty, value); }
}
public static readonly DependencyProperty MenuShortcutProperty = DependencyProperty.Register("MenuShortcut", typeof(string), typeof(MainMenuItem));
public string MenuIcon
{
get { return (string)GetValue(MenuIconProperty); }
set { SetValue(MenuIconProperty, value); }
}
public static readonly DependencyProperty MenuIconProperty = DependencyProperty.Register("MenuIcon", typeof(string), typeof(MainMenuItem));
}
}
我也试过这个:
public BitmapImage MenuIcon
{
get { return new BitmapImage(new Uri((string)GetValue(MenuIconProperty))); }
set { SetValue(MenuIconProperty, value); }
}
public static readonly DependencyProperty MenuIconProperty = DependencyProperty.Register("MenuIcon", typeof(BitmapImage), typeof(MainMenuItem));
最后我尝试使用新控件的部分:
<ctrl:MainMenuItem x:Name="TestMenu"
MenuCommand="{x:Static ApplicationCommands.New}"
MenuText="New..."
MenuShortcut="Ctr+N"
MenuIcon="../Resources/Icons/16/page_add.png"/>