2013-10-25 74 views
1

我使用Extended WPF Toolkit DropdownButton並希望將其DropDownContent背景設置爲(半)透明,以便它後面的任何內容顯示一點點。WPF工具包DropDownButton半透明背景

我目前的代碼在下面,但背景不透明。

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <Border Grid.Row="0" Margin="5" Background="Red"> 
     <xctk:DropDownButton Background="Transparent" Content="Settings" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="5" Padding="10,5,10,5" > 
      <xctk:DropDownButton.DropDownContent> 
       <ScrollViewer Padding="20" Foreground="White" Background="Transparent" > 
        <StackPanel Orientation="Horizontal" Background="Transparent" Width="200" Height="100" > 
        </StackPanel> 
       </ScrollViewer> 
      </xctk:DropDownButton.DropDownContent> 
     </xctk:DropDownButton> 
    </Border> 

    <Grid Grid.Row="1" Margin="5,0,5,5" Background="Green"> 
     <TextBlock Text="This text should show through slightly even if DropDownButton is open" Foreground="White" Margin="5" HorizontalAlignment="Right"/> 
    </Grid> 

</Grid> 

回答

1

您必須更改控件的模板,因爲彈出窗口的背景被設置在那裏。

默認DropDownButton的ControlTemplate:

<ControlTemplate x:Key="DefaultDropDownTemplate" TargetType="xctk:DropDownButton"> 
      <Grid Name="MainGrid" SnapsToDevicePixels="True"> 
       <ToggleButton Grid.Column="1" IsChecked="{Binding Path=IsOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Name="PART_DropDownButton"> 
        <ToggleButton.IsHitTestVisible> 
         <Binding Path="IsOpen" RelativeSource="{RelativeSource TemplatedParent}"> 
          <Binding.Converter> 
           <xctk:InverseBoolConverter /> 
          </Binding.Converter> 
         </Binding> 
        </ToggleButton.IsHitTestVisible> 
        <ToggleButton.Template> 
         <ControlTemplate TargetType="ToggleButton"> 
          <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" /> 
         </ControlTemplate> 
        </ToggleButton.Template> 
        <Grid> 
         <xctk:ButtonChrome CornerRadius="2.75" InnerCornerRadius="1.75" Name="ToggleButtonChrome" RenderChecked="{TemplateBinding xctk:DropDownButton.IsOpen}" RenderEnabled="{TemplateBinding UIElement.IsEnabled}" RenderMouseOver="{Binding Path=IsMouseOver, ElementName=PART_DropDownButton}" RenderPressed="{Binding Path=IsPressed, ElementName=PART_DropDownButton}"> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="Auto" /> 
           </Grid.ColumnDefinitions> 
           <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" Margin="{TemplateBinding Control.Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" /> 
           <Grid Grid.Column="1" IsHitTestVisible="False" Margin="4,3" Name="arrowGlyph"> 
            <Path Data="M0,1C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1z" Fill="Black" Height="4" Name="Arrow" Width="7" /> 
           </Grid> 
          </Grid> 
         </xctk:ButtonChrome> 
        </Grid> 
       </ToggleButton> 
       <Popup AllowsTransparency="True" Focusable="False" HorizontalOffset="1" IsOpen="{Binding Path=IsChecked, ElementName=PART_DropDownButton}" Name="PART_Popup" Placement="Bottom" StaysOpen="False" VerticalOffset="1"> 
        <Border BorderThickness="1"> 
         <Border.Background> 

裝定爲背景顏色的開始:

      <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
           <GradientStop Color="White" Offset="0" /> 
           <GradientStop Color="#FFE8EBED" Offset="1" /> 
          </LinearGradientBrush> 

裝定爲背景顏色的終結:

     </Border.Background> 
         <Border.BorderBrush> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="#FFA3AEB9" Offset="0" /> 
           <GradientStop Color="#FF8399A9" Offset="0.375" /> 
           <GradientStop Color="#FF718597" Offset="0.375" /> 
           <GradientStop Color="#FF617584" Offset="1" /> 
          </LinearGradientBrush> 
         </Border.BorderBrush> 
         <ContentPresenter Content="{TemplateBinding xctk:DropDownButton.DropDownContent}" Name="PART_ContentPresenter" /> 
        </Border> 
       </Popup> 
     </Grid> 
    <ControlTemplate.Triggers> 
    <Trigger Property="UIElement.IsEnabled" Value="False"> 
     <Setter Property="Shape.Fill" TargetName="Arrow" Value="#FFAFAFAF" /> 
    </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

在t中改變此筆刷的「不透明度」他控制模板以改變它的透明度。

<LinearGradientBrush EndPoint="0,1" StartPoint="0,0" Opacity="0.5"> 
    <GradientStop Color="White" Offset="0" /> 
    <GradientStop Color="#FFE8EBED" Offset="1" /> 
</LinearGradientBrush>