Question

I want to create a custom WPF dropdown menu, so I created a User control which contains a ToggleButton and a Popup control. The popup appears when I click on the button.
Now I want to add a mouse hover effect on the menu items in the popup: but the LinearGradientBrush is not working with alpha channels:

<UserControl.Resources>
    ...
    <Style x:Key="SubMenuItemStyle" TargetType="{x:Type MenuItem}">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="MenuItem">
                    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
                        <Rectangle x:Name="rectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                               Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"
                               Fill="{TemplateBinding Background}" />
                        <StackPanel>
                            <TextBlock x:Name="text" Text="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" />
                        </StackPanel>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Stroke" TargetName="rectangle" Value="#30000000"/>
                            <Setter Property="Fill" TargetName="rectangle">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
                                        <GradientStop Color="#10000000" Offset="0"/>
                                        <GradientStop Color="#10FFFFFF" Offset="1"/>
                                        <!-- Not works... -->
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" TargetName="text" Value="#FF9A9A9A"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid>
    <Controls:ToggleImageButton Style="{DynamicResource ArrowMenuStyle}" x:Name="imageButton" Height="21" />
    <Popup x:Name="popup" PlacementTarget="{Binding ElementName=imageButton}" Placement="Bottom" StaysOpen="False" IsOpen="{Binding ElementName=imageButton, Path=IsChecked}">
        <ItemsControl ItemsSource="{Binding MenuCommands}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <MenuItem Header="{Binding Name}" Command="{Binding Command}" Background="{Binding ElementName=popupMenuControl, Path=MenuBackground}" Foreground="{Binding ElementName=popupMenuControl, Path=MenuForeground}"  Click="MenuItem_Click" Style="{StaticResource SubMenuItemStyle}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Popup>
</Grid>

When I set the GradientBrush to this, everything works fine:

    <LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
              <GradientStop Color="Green" Offset="0"/>
              <GradientStop Color="Yellow" Offset="1"/>
    </LinearGradientBrush>

But it seems the Alpha channel breaks the whole thing, and what I see is a black rectangle.
…Any idea?

If I put the MenuItems inside a Menu container, the Menu overrides my styles…

Thanks in advance!

Answer 1

have you set AllowsTransparency to true?