WPF 模态窗口透明度答案

【问题标题】：WPF Modal Window TransparencyWPF 模态窗口透明度
【发布时间】：2013-02-20 10:42:54
【问题描述】：

我创建了一个模态 WPF 窗口，如下所示：

这是窗口的代码：

<Window x:Class="Dionysus.Core.Controls.ModalWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ModalWindow" AllowsTransparency="True" Background="Transparent" WindowStyle="None">

<Grid Name="MainGrid">
    <Rectangle Fill="Gray" Opacity="0.7" />
</Grid>

然后添加“ErrorControl”如下：

MainGrid.Children.Add(uc);

问题是，只要我展开堆栈跟踪，控件的透明度也会发生变化：

我假设这与使用不正确透明度的ScrollViewer 有关，即Rectangle 而不是包含Window。

我还将拥有ScrollViewer 的UserControl 的Opacity 设置为1，然后绑定Opacity：

<ScrollViewer Background="WhiteSmoke" Opacity="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=Opacity}">

谁能帮帮我？

更新

这是插入到Window 中的UserControl 的代码

<Grid x:Name="LayoutRootx" Background="WhiteSmoke">
        <StackPanel VerticalAlignment="Stretch">
            <TextBlock TextWrapping="Wrap" Margin="5" Text="An error has occured:" Foreground="Black" FontSize="15" FontWeight="Medium"/>
            <TextBlock TextWrapping="Wrap" Margin="5,10,5,5" Text="{Binding Error}"/>
            <odc:OdcExpander Header="Stack Trace" Margin="5" IsExpanded="False" Background="WhiteSmoke">
                <TextBox Text="{Binding StackTrace}" TextWrapping="Wrap" Margin="5,10,5,5" IsReadOnly="True" MaxHeight="370"/>
            </odc:OdcExpander>
            <odc:OdcExpander Header="Comment" Margin="5" IsExpanded="False">
                <TextBox Text="{Binding Comment}" TextWrapping="Wrap" Margin="5,10,5,5" MaxHeight="370" Name="txtComment"/>
            </odc:OdcExpander>
            <StackPanel Margin="5,10,5,5" Orientation="Horizontal" HorizontalAlignment="Left">
                <Button Style="{StaticResource DionysusButton}"  Width="100" Height="23" IsDefault="True" Name="btnSendError">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/Dionysus.Shell;component/Images/camera-icon.png" Margin="0,0,5,0">

                        </Image>
                        <TextBlock Text="Send to IT" VerticalAlignment="Center"/>
                        <core:DionysusTriggerAction Height="0" Width="0" TargetControl="{Binding ElementName=btnSendError}" MethodName="SendError"></core:DionysusTriggerAction>
                    </StackPanel>
                </Button>
                <Button Style="{StaticResource DionysusButton}"  Width="100" Height="23" Name="btnExit" Margin="10,0,0,0" IsCancel="True">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/Dionysus.Shell;component/Images/DeleteRed.png" Margin="0,0,5,0">

                        </Image>
                        <TextBlock Text="Close" VerticalAlignment="Center"/>
                    </StackPanel>
                </Button>
                <core:DionysusTriggerAction Height="0" Name="triggerAction2" Width="0" TargetControl="{Binding ElementName=btnExit}" MethodName="Exit"></core:DionysusTriggerAction>
            </StackPanel>
        </StackPanel>
    </Grid>

【问题讨论】：

标签： wpf xaml styling

【解决方案1】：

如果您的窗口大小固定且无法调整大小，您可以使用以下技巧：

<Grid>
    <Border BorderThickness="100" BorderBrush="Gray" Opacity="0.7">
        <Grid Background="White" Grid.Column="1" Grid.Row="1" x:Name="contentPlaceHolder">
            <TextBlock  Text="HELLO WORLD" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Border>
</Grid>

但是，您的 Window 不太可能始终具有相同的大小，因此为了使其更具动态性，您可以按如下方式更改 Window 的布局：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="YourDesiredSize"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="YourDesiredSize"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Rectangle Fill="Gray" Opacity="0.7" Grid.Row="0" Grid.ColumnSpan="3"/>
    <Rectangle Fill="Gray" Opacity="0.7" Grid.Row="2" Grid.ColumnSpan="3"/>
    <Rectangle Fill="Gray" Opacity="0.7" Grid.Row="1" Grid.Column="0"/>
    <Rectangle Fill="Gray" Opacity="0.7" Grid.Row="1" Grid.Column="2"/>

    <Grid Grid.Column="1" Grid.Row="1" Background="White" x:Name="contentPlaceHolder">
        <TextBlock  Text="HELLO WORLD" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Grid>

这个窗口放在另一个窗口上的结果或多或少是这样的：

然后不是添加到MainGrid，而是将UserControl添加到contentPlaceHolder或者你想调用它：

contentPlaceHolder.Children.Add(uc);

【讨论】：

嗨，我相应地更改了我的代码，但问题仍然存在，我的实际 UserControl 仍然是透明的！
尝试将ScrollViewer 插入到您的contentPlaceHolder 中，如果我没记错的话，它也应该这样做！
我试过了，还是不透明。我已经更新了截图。您的代码中是否还有其他内容（我在想ElementBinding 或DataTemplates）可能会导致Expander 打开后背景发生变化？
我已经用我的用户控件代码更新了我的问题，你可以看看那里！
据我所知，那里没有什么异常。 odc:OdcExpander 是什么？就像我说的，我感觉它与那个元素有关（打开扩展器时会出现透明度）

【解决方案2】：

好的，所以我找到了适合我的解决方案，我确信它不是最好的，但它可能会帮助遇到与我相同问题的人。

问题是我添加到Window 的UserControl 中的控件是透明的，虽然我无法弄清楚原因，但我找到了一个简单的解决方法。

通过将UserControl 的OpacityMask 属性更改为所需的Background 颜色，即使控件不透明度发生变化，它也会被您提供的Brush 所掩盖。

uc.OpacityMask = Brushes.WhiteSmoke;

希望它对某人有所帮助！

【讨论】：