Question

我使用Extended WPF Toolkit DropdownButton并希望将其DropDownContent背景设置为（半）透明，以便其背后的任何内容显示一点点。

我目前的代码如下，但背景不透明。

<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>

Answer 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>

该背景颜色的setter的开头：

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

背景颜色的setter的结尾：

                        </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>

在控件模板中更改此画笔的“不透明度”以更改它的透明度。

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

WPF工具包DropDownButton半透明背景

1 个答案: