开发者

WPF menu item template problem

I've written a template for a menuItem within which i've a Toggle button which in turn has a template. In the template of the button i provide different visual effects for different visual states of the button by changing the opacities of different borders. Now say when the menuItem is clicked, the clicked effect on the action button is shown. but when i hover over that menuItem again i expect to have the same highlighted effect even on the checked state of the toggle button. But the highlighted effect is applied to the whole menuitem except this toggle button just because the hover event is not propagated to the button.

Wanted to attach the image to make the problem clear but since I am new to this I am not allowed to do so.

How can i set the opacity of the border which gives the clicked effect to 0 when the menuItem is highlighted?!

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
            </Grid.ColumnDefinitions>
            <Grid x:Name="stackPanel" Background="{StaticResource DataLayerPanelBackGroundColorBrush}" >
                <Grid.Resources>
                    <ResourceDictionary Source="../Themes/Framework.xaml"/>
                </Grid.Resources>
                <Border x:Name="backgroundMouseOverVisual2" BorderThickness="0,0,0开发者_如何学C,0" Margin="0,3,0,3"  
                                    Background="{StaticResource ActionButtonMouseOverBackgroundColorBrush}" Opacity="0"/>
                <local:ActionButton DataContext="{TemplateBinding Tag}" x:Name="actionButton" Background="White"
                    MultiActionIdent="{Binding Converter={StaticResource ActionToIdentConverter}}"       
                    SnapsToDevicePixels="True" Style="{StaticResource MultiActionMenuItemActionButtonStyle}" Margin="0" 
                    />
            </Grid>
            <StackPanel x:Name="contentStackPanel" Background="{StaticResource DataLayerPanelBackGroundColorBrush}" Grid.Column="1">
                <ContentPresenter
                    TextElement.Foreground="{StaticResource MenuTextColorBrush}"
                    SnapsToDevicePixels="True"
                Name="HeaderHost"
                ContentSource="Header"
                RecognizesAccessKey="True"
                Width="Auto"
                Margin="10,4,35,4" />
            </StackPanel>
            <TextBlock
                x:Name="InputGestureText"
                Grid.Column="2"
                Text="{TemplateBinding InputGestureText}"
                DockPanel.Dock="Right" />
        </Grid>
        <Border x:Name="Border" BorderThickness="0.5" Margin="1,1,1,1" Padding="2,2,2,2" BorderBrush="Black" Background="{x:Null}" Opacity="0"/>
    </Grid>

And below is the ToggleButton template which is named as actionButton in the above template:


You need to use Style Triggers to change a style based on a different state.

Sample snippet:

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="BorderThickness" Value="0"/>
        </Trigger>
    </Style.Triggers>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜