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或GridBackground顏色設置爲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> 

如果don'w要使用的ElementName，只需更換寬度和高度由

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