Кнопка WPF с прямоугольником и непрозрачностью маски

Question

Я хотел бы сделать пользовательский интерфейс, как панель навигации Facebook. Моя идея состояла в том, чтобы сделать фон кнопки прозрачным и наложить на него значок в виде маски непрозрачности прямоугольника и изменить его заливку. Я так запутался, создавая Стиль.

Вот код

for (int i = 0; i < 6; i++)
{
    Button btn = new Button
    {
        Name = ("btnUi" + i).ToString(),
        Width = 42,
        Height = 42,
        Content = new Rectangle
        {
            Fill = Brushes.DarkBlue,
            OpacityMask = new ImageBrush
            {
                ImageSource = new BitmapImage(new Uri(Directory.GetCurrentDirectory() + @"\images\ui_0" + (i + 1).ToString() + ".png"))
            },
            VerticalAlignment = VerticalAlignment.Center,
            Width = 32,
            Height = 32
        },               
        Style = this.FindResource("uiStyle01") as Style
    };
    if (i == 0) btn.IsEnabled = false;
    btn.Click += btnUi_Click;
    uiPanel.Children.Add(btn);
}

И приложение.xaml

<Application.Resources>
    <Style TargetType="Button" x:Key="uiStyle01">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Rectangle x:Name="Rectangle" Fill="MidnightBlue">
                    </Rectangle>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Rectangle" Property="Fill" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter> 
    </Style> 
</Application.Resources>

Я ценю любую идею, чтобы сделать это проще.

facebook_sample_image

Answer 1

"Шаблон" в стиле перезапишет изображение, которое вы добавляете как контент из C#

Шаблон просто добавить контент в кнопку.

Простое решение

Удалите "Шаблон" из стиля в xaml.

Используйте ниже

<Style TargetType="Button" x:Key="uiStyle01">
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="Gray"/>
             </Trigger>
         </Style.Triggers>
</Style>

Это просто обновит фон кнопки и сохранит изображение как есть.

Надеюсь это поможет.