WPF窗口 - 淡化同一窗口的不同部分

Question

我有一个带有标记的基本WPF窗口，具体如下：

<Window x:Class="Application.SomeWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SomeWindow"
        Topmost="True" WindowStyle="None" Height="39" Width="400"
        ResizeMode="NoResize" ShowInTaskbar="False"
        WindowStartupLocation="Manual" Background="Transparent"
        Closing="Window_Closing" AllowsTransparency="True" Opacity="0">
   <Border Background="CornflowerBlue" BorderBrush="Black" BorderThickness="0,0,0,0" CornerRadius="5,5,5,5" Opacity="0.75">
      <Grid>
         <!-- Display bar -->
         <Image Grid.Row="1" Height="24" Margin="7,7,0,0" Name="img1" Stretch="Fill" VerticalAlignment="Top" Source="/Application;component/Images/dashboard/1.png" HorizontalAlignment="Left" Width="13" />
         <Image Height="24" Margin="19,7,47,0" Name="image21" Source="/Application;component/Images/dashboard/2.png" Stretch="Fill" VerticalAlignment="Top" Grid.Row="1" Grid.ColumnSpan="2" />
         <!-- Button 1 -->
         <Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,25,0" Name="btn1" Click="btn1_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="1">
            <Image Height="26" HorizontalAlignment="Right"  Name="img1" Source="/Application;component/Images/dashboard/3.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
         </Button>
         <!-- Button 2 -->
         <Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,5,0" Name="btn2" Click="btn2_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="2">
            <Image Height="26" HorizontalAlignment="Right"  Name="img2" Source="/Application;component/Images/dashboard/4.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
         </Button>
      </Grid>
   </Border>
</Window>

现在看来是这样的：

我真正想做的是最初看起来像这样：

然后，一旦发生鼠标悬停，从0开始淡化背景不透明度，使其看起来像第一张图像。问题是，如果我将Border或Grid Background颜色设置为Transparent，目标是在鼠标悬停时淡入，那么内部的所有内容 Border或Grid也会受到影响。

有没有办法单独管理窗口及其UI元素的不透明度？或者也许有一条完全不同的路线可以让这个背景在鼠标悬停时消失？感谢。

Answer 1

有两种选择。第一个是移动网格内的外边框，作为第一个孩子（并且其他控件旁边，而不是它）。这样它会自行消失，但仍然落后于其他控件。当然，您必须设置ColumnSpan / RowSpan，或将整个内容包装在另一个Grid中。

第二个选项是淡化背景，而不是整个边框：

<Border ...>
    <Border.Background>
        <SolidColorBrush Color="CornflowerBlue" Opacity="0.5"/>
    </Border.Background>
    ...

Answer 2

尝试这个技巧 - 绘制一个矩形或边框，其尺寸绑定到父元素或ElementName。 它不会影响树的其余元素。适合我。

<Grid x:Name="abc">
                <Border
                    Width="{Binding ActualWidth, ElementName=abc}"
                    Height="{Binding ActualHeight, ElementName=abc}"
                    Background="Blue"
                    Opacity="0.5"/>
                //buttons or inner grid
                  ...
</Grid>

如果您不想使用ElementName，只需用

替换Width和Height

Width="{Binding ActualWidth, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
Height="{Binding ActualHeight, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"