Windows UWP ContentDialog去掉阴影（全透明）的实现

已于 2024-05-28 21:11:51 修改
阅读量773 收藏 11
点赞数 7
分类专栏： Windows开发 # .Net 开发 文章标签： windows ContentDialog 全透明 去除阴影
于 2024-05-28 21:10:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingaizhu/article/details/139277120
版权

一、前言

    在WIndows开发中，使用UWP（Universal WIndows）项目开发过程中，使用ContentDialog 的过程中，我们可能并不满足现有的样式，这时就需要自定义样式。笔者在自定义样式过程中，遇到了一个难题，当使用了自定义的背景之后，发现后面总有一个阴影无法去除，由于背景是白色的，这个阴影就特别显眼，非常不好看。接下来，将详细介绍一下遇到的问题。

二、自定义 ContentDilaog 样式

    笔者在使用UWP开发，需要自定义ContentDialog 的样式，自定义样式的方法其实很简单，网上也很多介绍，主要是自定义Style样式。首先，需要从 Windows Kits 安装目录中找到 ContentDilaog 的默认样式，默认样式文件在 [你电脑中WIndows Kits 安装目录]\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.18362.0\Generic\generic.xaml，找到这个文件并打开，搜索TargetType="ContentDialog" 就可以找到了，将整个Style复制出来，放到自己的项目中（可以新建自己的xaml资源文件，也可以直接放在 ContentDialog xaml声明文件中）。

    说到这里，必须注意的是，如果需要自定义 ContentDialog，你必须添加一个 xaml 文件来定义ContentDialog，在项目中右键 -> 添加 -> 新建项，在弹出的对话框中，选择C#，然后选“内容对话框”，输入对话框名称并“确定”，如下图：
创建内容对话框
    创建xaml文件后，内容大致如下：

<ContentDialog
    x:Class="Game.PrivacyPolicyDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Game"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    PrimaryButtonText="不同意"
    PrimaryButtonClick="PrivacyPolicyDialog_DenyButtonClick"
    SecondaryButtonText="同意并继续"
    SecondaryButtonClick="PrivacyPolicyDialog_AcceptButtonClick">
    <!-- 省略其他内容=-->
</ContentDialog>

说明：以上示例代码中，x:Class 对应的是cs文件类名称，如果你需要更改命名空间，要同时修改 xaml和cs文件，否则编译会报错。

    上面创建的内容对话框，样式是默认的样式，通过定义自定义样式，就可以改变原来的样式。如下示例：

ContentDialog
    x:Class="Game.PrivacyPolicyDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Game"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    PrimaryButtonText="不同意"
    PrimaryButtonClick="PrivacyPolicyDialog_DenyButtonClick"
    SecondaryButtonText="同意并继续"
    SecondaryButtonClick="PrivacyPolicyDialog_AcceptButtonClick">
    <ContentDialog.Resources>
        <ImageBrush x:Key="PrivacyPolicyDenyButtonBg" ImageSource="Assets/PrivacyPolicyDenyButtonBg.png" />
        <ImageBrush x:Key="PrivacyPolicyAcceptButtonBg" ImageSource="Assets/PrivacyPolicyAcceptButtonBg.png" />
        
        <!-- 隐私协议拒绝按钮样板 -->
        <Style TargetType="Button" x:Key="PrivacyPolicyDenyButtonStyle">
            <Setter Property="Background" Value="{StaticResource PrivacyPolicyDenyButtonBg}" />
            <Setter Property="Foreground" Value="#FFE30416" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Padding" Value="{ThemeResource ButtonPadding}" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="FocusVisualMargin" Value="-3" />
            <Setter Property="Width" Value="302" />
            <Setter Property="Height" Value="80" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter x:Name="ContentPresenter"
                                          Background="{TemplateBinding Background}"
                                          BackgroundSizing="{TemplateBinding BackgroundSizing}"
                                          BorderBrush="Transparent"
                                          BorderThickness="{TemplateBinding BorderThickness}"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                          CornerRadius="{TemplateBinding CornerRadius}"
                                          Padding="{TemplateBinding Padding}"
                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                          AutomationProperties.AccessibilityView="Raw">

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PrivacyPolicyDenyButtonBg}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#FFE30416" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PrivacyPolicyDenyButtonBg}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#FFE30416" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PrivacyPolicyDenyButtonBg}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Gray" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                        </ContentPresenter>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- 隐私协议接受按钮样板 -->
        <Style TargetType="Button" x:Key="PrivacyPolicyAcceptButtonStyle">
            <Setter Property="Background" Value="{StaticResource PrivacyPolicyAcceptButtonBg}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonRevealBorderThemeThickness}" />
            <Setter Property="Padding" Value="{ThemeResource ButtonPadding}" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="FocusVisualMargin" Value="-3" />
            <Setter Property="Width" Value="302" />
            <Setter Property="Height" Value="80" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter x:Name="ContentPresenter"
                                  Background="{TemplateBinding Background}"
                                  BackgroundSizing="{TemplateBinding BackgroundSizing}"
                                  BorderBrush="{TemplateBinding BorderBrush}"
                                  BorderThickness="{TemplateBinding BorderThickness}"
                                  Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                  ContentTransitions="{TemplateBinding ContentTransitions}"
                                  CornerRadius="{TemplateBinding CornerRadius}"
                                  Padding="{TemplateBinding Padding}"
                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                  AutomationProperties.AccessibilityView="Raw">

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="PointerOver">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PrivacyPolicyAcceptButtonBg}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PrivacyPolicyAcceptButtonBg}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PrivacyPolicyAcceptButtonBg}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Gray" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                        </ContentPresenter>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- 隐私协议对话框样式 -->
        <Style TargetType="local:PrivacyPolicyDialog">
            <Setter Property="Foreground" Value="{ThemeResource ContentDialogForeground}" />
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="Assets/DialogBg.png"/>
                </Setter.Value>
            </Setter>
            <Setter Property="BackgroundSizing" Value="0" />
            <Setter Property="BorderBrush" Value="#00000000" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:PrivacyPolicyDialog">
                        <Border x:Name="Container" Background="#22000000">

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="DialogShowingStates">

                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="DialogHidden">

                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="IsHitTestVisible">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.05" />
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.05" />
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                                    <LinearDoubleKeyFrame KeyTime="0:0:0.083" Value="0.0" />
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualTransition>
                                        <VisualTransition To="DialogShowing">

                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.0" />
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.0" />
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
                                                    <LinearDoubleKeyFrame KeyTime="0:0:0.167" Value="1.0" />
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="DialogHidden" />
                                    <VisualState x:Name="DialogShowing">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.Visibility" Value="Visible" />
                                            <Setter Target="BackgroundElement.TabFocusNavigation" Value="Cycle" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="DialogShowingWithoutSmokeLayer">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.Visibility" Value="Visible" />
                                            <Setter Target="LayoutRoot.Background" Value="{x:Null}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DialogSizingStates">
                                    <VisualState x:Name="DefaultDialogSizing" />
                                    <VisualState x:Name="FullDialogSizing">
                                        <VisualState.Setters>
                                            <Setter Target="BackgroundElement.VerticalAlignment" Value="Stretch" />
                                        </VisualState.Setters>
                                    </VisualState>

                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ButtonsVisibilityStates">
                                    <VisualState x:Name="AllVisible" />
                                    <VisualState x:Name="NoneVisible">
                                        <VisualState.Setters>
                                            <Setter Target="CommandSpace.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PrimaryVisible">
                                        <VisualState.Setters>
                                            <Setter Target="PrimaryButton.(Grid.Column)" Value="2" />
                                            <Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="PrimaryButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
                                            <Setter Target="CloseButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="SecondaryVisible">
                                        <VisualState.Setters>
                                            <Setter Target="SecondaryButton.(Grid.Column)" Value="2" />
                                            <Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="SecondaryButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
                                            <Setter Target="CloseButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="CloseVisible">
                                        <VisualState.Setters>
                                            <Setter Target="CloseButton.(Grid.Column)" Value="2" />
                                            <Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="CloseButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
                                            <Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PrimaryAndSecondaryVisible">
                                        <VisualState.Setters>
                                            <Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="SecondaryButton.(Grid.Column)" Value="2" />
                                            <Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="SecondaryButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="CloseButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PrimaryAndCloseVisible">
                                        <VisualState.Setters>
                                            <Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="CloseButton.(Grid.Column)" Value="2" />
                                            <Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="CloseButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="SecondaryAndCloseVisible">
                                        <VisualState.Setters>
                                            <Setter Target="SecondaryButton.(Grid.Column)" Value="0" />
                                            <Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="SecondaryButton.Margin" Value="0,0,2,0" />
                                            <Setter Target="CloseButton.(Grid.Column)" Value="2" />
                                            <Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="CloseButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>

                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DefaultButtonStates">
                                    <VisualState x:Name="NoDefaultButton" />
                                    <VisualState x:Name="PrimaryAsDefaultButton">
                                        <VisualState.Setters>
                                            <Setter Target="PrimaryButton.Style" Value="{StaticResource AccentButtonStyle}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="SecondaryAsDefaultButton">
                                        <VisualState.Setters>
                                            <Setter Target="SecondaryButton.Style" Value="{StaticResource AccentButtonStyle}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="CloseAsDefaultButton">
                                        <VisualState.Setters>
                                            <Setter Target="CloseButton.Style" Value="{StaticResource AccentButtonStyle}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DialogBorderStates">
                                    <VisualState x:Name="NoBorder" />
                                    <VisualState x:Name="AccentColorBorder">
                                        <VisualState.Setters>
                                            <Setter Target="BackgroundElement.BorderBrush" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="LayoutRoot" Visibility="Collapsed" Background="{ThemeResource SystemControlPageBackgroundMediumAltMediumBrush}">
                                <Border x:Name="BackgroundElement"
                                        Background="{TemplateBinding Background}"
                                        FlowDirection="{TemplateBinding FlowDirection}"
                                        BorderThickness="1"
                                        BorderBrush="#08000000"
                                        CornerRadius="18"
                                        MinWidth="858"
                                        MaxWidth="858"
                                        MinHeight="617"
                                        MaxHeight="617"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <ScaleTransform x:Name="ScaleTransform" />
                                    </Border.RenderTransform>
                                    <Grid x:Name="DialogSpace" Padding="15,15,15,15" CornerRadius="15">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <ScrollViewer x:Name="ContentScrollViewer"
                                              HorizontalScrollBarVisibility="Disabled"
                                              VerticalScrollBarVisibility="Disabled"
                                              HorizontalScrollMode="Disabled"
                                              VerticalScrollMode="Disabled"
                                              ZoomMode="Disabled"
                                              Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
                                              IsTabStop="False">
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="*" />
                                                </Grid.RowDefinitions>
                                                <ContentControl x:Name="Title"
                                                        Margin="{ThemeResource ContentDialogTitleMargin}"
                                                        Content="{TemplateBinding Title}"
                                                        ContentTemplate="{TemplateBinding TitleTemplate}"
                                                        FontSize="20"
                                                        FontFamily="XamlAutoFontFamily"
                                                        FontWeight="Normal"
                                                        Foreground="{TemplateBinding Foreground}"
                                                        HorizontalAlignment="Left"
                                                        VerticalAlignment="Top"
                                                        IsTabStop="False">
                                                    <ContentControl.Template>
                                                        <ControlTemplate TargetType="ContentControl">
                                                            <ContentPresenter Content="{TemplateBinding Content}"
                                                                      MaxLines="2"
                                                                      TextWrapping="Wrap"
                                                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                      Margin="{TemplateBinding Padding}"
                                                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                        </ControlTemplate>
                                                    </ContentControl.Template>
                                                </ContentControl>
                                                <ContentPresenter x:Name="Content"
                                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                                          Content="{TemplateBinding Content}"
                                                          FontSize="{ThemeResource ControlContentThemeFontSize}"
                                                          FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                                          Margin="{ThemeResource ContentDialogContentMargin}"
                                                          Foreground="{TemplateBinding Foreground}"
                                                          Grid.Row="1"
                                                          TextWrapping="Wrap" />
                                            </Grid>
                                        </ScrollViewer>
                                        <Grid x:Name="CommandSpace"
                                              Grid.Row="1"
                                              HorizontalAlignment="Stretch"
                                              VerticalAlignment="Bottom"
                                              XYFocusKeyboardNavigation="Enabled"
                                              Padding="35,25,35,35"
                                              Margin="{ThemeResource ContentDialogCommandSpaceMargin}">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition />
                                                <ColumnDefinition Width="0.5*" />
                                                <ColumnDefinition Width="0.5*" />
                                                <ColumnDefinition />
                                            </Grid.ColumnDefinitions>
                                            <Button x:Name="PrimaryButton"
                                                    Content="{TemplateBinding PrimaryButtonText}"
                                                    IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}"
                                                    Style="{StaticResource PrivacyPolicyDenyButtonStyle}"
                                                    HorizontalAlignment="Left"
                                                    VerticalAlignment="Stretch"
                                                    Margin="0,0,2,0"
                                                    Grid.Column="0" />
                                            <Button x:Name="SecondaryButton"
                                                    Content="{TemplateBinding SecondaryButtonText}"
                                                    IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}"
                                                    Style="{StaticResource PrivacyPolicyAcceptButtonStyle}"
                                                    ElementSoundMode="FocusOnly"
                                                    HorizontalAlignment="Right"
                                                    VerticalAlignment="Stretch"
                                                    Margin="2,0,2,0"
                                                    Grid.Column="1"
                                                    Grid.ColumnSpan="2" />
                                            <Button x:Name="CloseButton"
                                                    Content="{TemplateBinding CloseButtonText}"
                                                    Style="{TemplateBinding CloseButtonStyle}"
                                                    ElementSoundMode="FocusOnly"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch"
                                                    Visibility="Collapsed"
                                                    Margin="2,0,0,0"
                                                    Grid.Column="3" />
                                        </Grid>

                                    </Grid>
                                </Border>

                            </Grid>
                        </Border>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ContentDialog.Resources>

    <Grid HorizontalAlignment="Center" Width="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Height="120" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="750" />
        </Grid.ColumnDefinitions>

        <TextBlock FontSize="36" Foreground="Black" FontWeight="Bold"
                   HorizontalAlignment="Center" VerticalAlignment="Center">用户隐私政策提示</TextBlock>

        
        <WebView x:Name="PrivacyPolicyWebView" Grid.Row="1" 
                 ScrollViewer.HorizontalScrollMode="Disabled"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                 ScrollViewer.VerticalScrollMode="Enabled"
                 ScrollViewer.VerticalScrollBarVisibility="Hidden"/>

    </Grid>
</ContentDialog>

说明：样式文件中，TargetType="local:PrivacyPolicyDialog" 表示将次样式文件应用到指定的内容对话框类中，如果需要多个内容对话框类使用相同的样式，可以使用资源文件的方式定义样式，并声明 x:Key 值，在内容对话框的 Style 属性中指定。

三、问题描述

    上面的自定义样式之后，通过修改默认样板，也就是Template属性，就可以更改默认的布局，自定义样式后，效果如下图：
有阴影的效果
    从上图可以看到，因为自定义背景白色且有圆角，阴影就显得尤其难看。在自定义的样式文件中修改了所有的属性，都无法去除，就算将对话框内容部分的背景改为透明，仍旧有一个半透明黑色的框框，如下图：
去不掉的半透明黑色框

四、解决方案

    其实上图的半透明黑色框，是阴影。通过网上查阅相关资料，终于找到最完美的解决方案，就是通过修改 ContentDialog 的 Translation 属性，将 Y 坐标修改得足够低，将不会显示阴影。

<ContentDialog
    x:Class="GamePrivacyPolicyDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Game"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Translation="0,0,-100"
    PrimaryButtonText="不同意"
    PrimaryButtonClick="PrivacyPolicyDialog_DenyButtonClick"
    SecondaryButtonText="同意并继续"
    SecondaryButtonClick="PrivacyPolicyDialog_AcceptButtonClick">
    <!-- 这里省略了其他内容 -->
</ContentDialog>

笔者将Z坐标改为了-100（Translation="0,0,-100"），这样阴影完全消失，如果不放心，可以改得更低的值，比如-1000甚至更低。

    通过修改Translation 属性的 Z 坐标，阴影可以完全消失，如下图：
去掉阴影的效果

六、编后语

    内容对话框这个阴影问题，确实比较头疼，笔者也是找了很久才找到解决办法。网上也有说可以通过 Shadow 属性配置，但是这个属性需要较高的目标版本，如果其他开发者使用较高目标版本，可以验证一下。

精装机械师
关注
  • 7
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Windows UWP微软源码（代码参考大全）
08-26
【Windows UWP微软源码（代码参考大全）】 Windows UWP（通用Windows平台）是微软为Windows 10及其后续版本推出的一种应用程序开发框架。它允许开发者编写一次代码，即可在各种设备上运行，包括PC、手机、平板、...
WindowsUI:在WinForms中实现UWP样式的库
04-01
《在WinForms中实现UWP样式的库：深入解析与应用》 Windows用户界面（UI）的发展历程丰富多样，从早期的Aero风格到现代的UWP（Universal Windows Platform）风格，每一次变化都带来了更佳的用户体验。对于开发人员...
[UWP]不那么好用的ContentDialog
weixin_30813225的博客
11-07 202
ContentDialog是UWP开发中最常用的组件之一，一个体验良好的UWP应用很难避免不去使用它。博客园里也有许多的文章介绍如何来利用ContentDialog实现各种自定义样式的弹窗界面。不过实际上ContentDialog是一个令人又爱又恨的组件，今天我们就来说一下ContentDialog的缺点。 ContentDialog适合实现轻量级的UI需求，但在处理复杂UI需求时非常难用，例如说...
uwp - ContentDialog - 自定义仿iphone提示框，提示框美化
weixin_33726943的博客
11-07 274
原文:uwp - ContentDialog - 自定义仿iphone提示框，提示框美化为了实现我想要的效果花费了我很长时间，唉，当初英语不好好学，翻官网翻了半天才找到，分享给刚入门的新手。   首先看一张图片示例，我们要模仿的dialog就是长这样的：     做出来的效果图： 【代码】 XAML【MainPage.xaml】： 1 &lt;Grid Backg...
win10 uwp ContentDialog 点确定不关闭
lindexi
07-05 3046
微软的ContentDialog不是一直有，而是UWP新的，可以使用Content放用户控件，使用很好，但是一点不好的是，默认的一点击下面按钮就会退出。 我们有时候需要ContentDialog用户输入，而用户没有输入我们想要的，给用户提示，不退出
mysql 工具 uwp_[UWP]不那么好用的ContentDialog
weixin_31256683的博客
01-27 117
ContentDialog是UWP开发中最常用的组件之一，一个体验良好的UWP应用很难避免不去使用它。博客园里也有许多的文章介绍如何来利用ContentDialog实现各种自定义样式的弹窗界面。不过实际上ContentDialog是一个令人又爱又恨的组件，今天我们就来说一下ContentDialog的缺点。ContentDialog适合实现轻量级的UI需求，但在处理复杂UI需求时非常难用，例如说：...
Windows UWP开发 – MessageDialog 和 ContentDialog
lnc2003的专栏
03-08 376
MessageDialog 在Metro程序中，没有传统的窗口，当我们要用需要交互的消息提示时，在Win8时代，引入了一个MessageDialog来取代常用的MessageBox。使用方法如下： private async void onButtonClick(object sender, RoutedEventArgs e) { var dialog = new...
Windows 10编程：UWP Focus（N之2）
04-08
在本篇中，我们将深入探讨Windows 10编程中的一个重要概念——通用Windows平台（Universal Windows Platform，简称UWP）。这是Microsoft推出的一种现代化应用程序开发框架，旨在为不同类型的Windows设备提供一致性的...
Windows UWP MVVM
09-08
**Windows UWP MVVM 设计模式详解** 在现代软件开发中，设计模式是提升代码可维护性和可扩展性的重要工具。Windows Universal Platform (UWP) 应用开发中，MVVM（Model-View-ViewModel）设计模式被广泛采用，尤其在...
通用Windows平台（UWP）应用指南
07-23
资源名称：通用 Windows 平台 (UWP) 应用指南资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
张高兴的 UWP 开发笔记：定制 ContentDialog 样式
ahuihun5901的博客
03-25 220
　　我需要一个背景透明的 ContentDialog，像下图一样。如何定制？写了一个简单的示例（https://github.com/ZhangGaoxing/uwp-demo/tree/master/ContentDialogDemo） 　　首先在项目里新建一个资源字典，并在 App.xaml 添加以下代码将此资源字典合并 <Application.Resourc...
WINUI3开发笔记 以“完全信任权限”模式运行桌面应用
KS STUDIO的博客
09-05 790
WinUI 3提供了一种功能，使应用程序能够在AppContainer的安全沙盒以外以“完全信任权限”运行。 在UWP应用的时候，我们总是会默认以受限制的方式运行，而基于WinUI 3的不会，接下来的举个例子： 将MainWindow.xaml文件的内容改为： <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> &l
ListView如何去掉无所谓的阴影
Vincent20111024的专栏
10-25 980
给大家分享一下自己在使用listView的过程中遇到的一下情况以及解决的办法。 1 listview中在设置了背景之后，会发生listview的上边和下边有黑色的阴影。，使用android:fadingEdge="none"  即可解决。 2  自定义的listview，在拖动的时候出现一个空间黑色底色的情况，使用android:cacheColorHint=“#00000000”即可
Windows UWP开发系列 – MessageDialog 和 ContentDialog
weixin_34160277的博客
10-06 280
MessageDialog 在Metro程序中，没有传统的窗口，当我们要用需要交互的消息提示时，在Win8时代，引入了一个MessageDialog来取代常用的MessageBox。使用方法如下： private async void onButtonClick(object sender, RoutedEventArgs e) { var dialo...
win10 UWP MessageDialog 和 ContentDialog
lindexi
03-07 6483
我之前开发一个软件 winMarkdown，这个软件在关闭需要提示用户还没有保存东西，需要保存，如果用户选择退出，那么把数据存放。 在Metro程序中，没有传统的窗口，当我们要用需要交互的消息提示时，在Win8时代，引入了一个MessageDialog来取代常用的MessageBox。
C++ UWP 使用对话框控件 ContentDialog
星空千代
01-18 525
处理回调需要用到C++/CX 异步编程 void _xxx::MainPage::bre_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e) { ContentDialog^ dialog = ref new ContentDialog; dialog->Title = "标题"; dialog->Content = "内容"; dialog->PrimaryButtonText = "确.
WPF 背景色透明度设置两种方式及区别
qq_36248270的博客
04-13 9046
方式一：通过 Opacity 属性设置背景色透明度 方式二：通过Background 属性的Alpha 改变背景色透明度 <!--方式一--> <Border Background="Green" Opacity="0.4"> <Border Background="Red"> <Button Width="300" Height="60" Content="透明度被爷爷的Opacity 属性影响" FontSize="14"/>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值