如何在材料设计中激活汉堡包菜单时禁用灰色覆盖图在XAML工具包(WPF)中

时间:2016-07-25 16:19:31

标签: c# wpf xaml

以下是示例应用中叠加层的图片: enter image description here

以下是XAML Toolkit中Material Material的git页面(您可以在此处下载演示项目):Toolkit:https://github.com/ButchersBoy/MaterialDesignInXamlToolkit

这可能是XAML Toolkit库中Material Design中的某个属性,我想知道是否有人知道如何设置它(或者甚至可以关闭叠加层)。

<Window x:Class="MaterialDesignColors.WpfExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        xmlns:wpfExample="clr-namespace:MaterialDesignColors.WpfExample"
        xmlns:domain="clr-namespace:MaterialDesignColors.WpfExample.Domain"
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:domain1="clr-namespace:MaterialDesignDemo.Domain"
        xmlns:materialDesignDemo="clr-namespace:MaterialDesignDemo"
        Title="Material Design in XAML" Height="800" Width="1100"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"        
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{StaticResource MaterialDesignFont}" Icon="favicon.ico">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <!-- data template used for the dialogs example, defines a View for a ViewModel of type DateTime  -->
            <DataTemplate DataType="{x:Type system:DateTime}">
                <StackPanel Margin="16">
                    <TextBlock>England win the World Cup:</TextBlock>
                    <TextBlock Margin="0 8 0 0" Text="{Binding }" />
                    <TextBlock Margin="0 8 0 0" >You will never see that again.</TextBlock>
                    <Button  Margin="0 8 0 0" IsDefault="True" Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" Style="{DynamicResource MaterialDesignFlatButton}">AWESOME</Button>
                </StackPanel>
            </DataTemplate>
        </ResourceDictionary>
    </Window.Resources>

    <materialDesign:DialogHost Identifier="RootDialog">
        <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
            <materialDesign:DrawerHost.LeftDrawerContent>
                <DockPanel MinWidth="212">
                    <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" 
                                  DockPanel.Dock="Top"
                                  HorizontalAlignment="Right" Margin="16"
                                  IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}" />                    
                    <ListBox x:Name="DemoItemsListBox" Margin="0 16 0 16" SelectedIndex="0"                         
                             PreviewMouseLeftButtonUp="UIElement_OnPreviewMouseLeftButtonUp">
                        <ListBox.ItemTemplate>
                            <DataTemplate DataType="domain:DemoItem">
                                <TextBlock Text="{Binding Name}" Margin="32 0 32 0" />
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <domain:DemoItem Name="Home">

...

                        <domain:DemoItem Name="Shadows">
                            <domain:DemoItem.Content>
                                <wpfExample:Shadows />
                            </domain:DemoItem.Content>
                        </domain:DemoItem>
                    </ListBox>
                </DockPanel>
            </materialDesign:DrawerHost.LeftDrawerContent>
            <DockPanel>
                <materialDesign:ColorZone Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth2"
                                          Mode="PrimaryMid" DockPanel.Dock="Top">
                    <DockPanel>
                        <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"
                                      x:Name="MenuToggleButton"/>
                        <materialDesign:PopupBox DockPanel.Dock="Right" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
                            <StackPanel>
                                <Button Content="Hello World" Click="MenuPopupButton_OnClick"/>
                                <Button Content="Nice Popup" Click="MenuPopupButton_OnClick"/>
                                <Button Content="Goodbye" Click="MenuPopupButton_OnClick"/>                                
                            </StackPanel>
                        </materialDesign:PopupBox>
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22">Material Design In XAML Toolkit</TextBlock>
                    </DockPanel>
                </materialDesign:ColorZone>
                <ContentControl Margin="16" Content="{Binding ElementName=DemoItemsListBox, Path=SelectedItem.Content}" />                
            </DockPanel>
        </materialDesign:DrawerHost>
    </materialDesign:DialogHost>
</Window>

1 个答案:

答案 0 :(得分:5)

黑色阴影是由 Generic.xaml 中定义的网格引起的:

<Grid x:Name="PART_ContentCover" Background="{x:Null}" Opacity="0" 
      IsHitTestVisible="False" Focusable="False"  />

动画可以在绘制抽屉时将不透明度设置为0.56。不幸的是,这个网格不属于任何模板,所以你不能在客户端xaml中更改它。

另一种选择是更改阴影的黑色画笔,该画笔也在 Generic.xaml 中定义:

<SolidColorBrush x:Key="BlackBackground" Color="Black" />

但这也是我不知道如何从客户端xaml进行更改的原因,因此只有具有更多WPF技能的人提供更好选择的唯一建议是简单地重新编译源并将黑色笔刷更改为:

<SolidColorBrush x:Key="BlackBackground" Color="#00000000" />

或者你也可以使用弹出控件,它在另一个没有暗色调功能的演示中显示,但除此之外是相同的。

更新:我找到了解决此问题的方法之一。您可以像这样继承DrawerHost:

public class DrawerHostEx : DrawerHost
{
    public DrawerHostEx()
    {
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        var grid = GetTemplateChild(TemplateContentCoverPartName) as System.Windows.Controls.Grid;
        grid.Visibility = System.Windows.Visibility.Collapsed;
    }
}

然后你只需在XAML中用DrawerHostEx替换DrawerHost。