Bouton WPF avec Rectangle et OpacityMask

Question

Je voudrais faire une barre de navigation Facebook comme interface utilisateur. Mon idée était de rendre l'arrière-plan du bouton transparent et d'y placer une icône en tant que masque d'opacité d'un rectangle et de changer le remplissage de celui-ci. J'ai tellement confus en créant le style.

Voici le code

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); 
} 

Et le App.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> 

J'appriciate une idée pour le rendre plus facile aussi.

facebook_sample_image

Answer 1

« Modèle » dans le style écrasera l'image que vous ajoutez que le contenu de C#

modèle est contenu à ajouter simplement le bouton.

solution simple

Supprimer "modèle" du style en XAML.

utilisation ci-dessous

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

Ce sera tout simplement mettre à jour l'arrière-plan du bouton et garder l'image telle qu'elle est.

Espérons que cela aide.