Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

6 avril 2014 7 06 /04 /avril /2014 23:56

    1-Styles

    a-Un Style peut être défini :  

  • Dans le contrôle lui-même 
<TextBox HorizontalAlignment="Left" Height="50" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="200">           
                 <TextBox.Style>           
                <Style TargetType="TextBox">
                    <Setter Property="Foreground" Value="Yellow" />
                </Style>
            </TextBox.Style>
  </TextBox>           
 
  • En ressource d’un conteneur/ de la page/fenêtre/etc.
<Grid.Resources>
            <Style TargetType="TextBox">
                <Setter Property="Foreground" Value="Yellow" />
           </Style>
</Grid.Resources>

 

  • Dans un dictionnaire de ressources (pour toute l’application).
Exemple : on ajoute un dossier « Ressources » puis un dictionnaire de ressources « Styles.xaml »    

App.xaml

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Ressources/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

 

b- Styles nommés, implicites, BasedOn
  • Style accessible par sa clé
<Style x:Key="TextBoxStyle" TargetType="TextBox">
                <Setter Property="FontSize" Value="20" />
                <Setter Property="Foreground" Value="Violet"/>
</Style>

 

  • Style s’appliquant à tous les contrôles d’un type
<Style TargetType="TextBox">
                <Setter Property="FontSize" Value="20" />
                <Setter Property="Foreground" Value="Violet"/>
</Style>
   
  • BasedOn Héritage de Style(par nom ou implicite)
Exemple : ici toutes les TextBox auront une police bleue de taille 20
<Style x:Key="BaseTextBoxStyle" TargetType="TextBox">
                <Setter Property="FontSize" Value="20" />
                <Setter Property="Foreground" Value="Violet"/>
</Style>
<Style TargetType="TextBox">
                <Setter Property="Foreground" Value="Red"/>
</Style>
 
<Style TargetType="TextBox" BasedOn="{StaticResource BaseTextBoxStyle}">
                <Setter Property="Foreground" Value="Blue"/>
</Style>

 

2 – Templates

a – Un Template peut être défini
  • Dans le contrôle lui-même
<Button x:Name="btOK"  Width="150" Height="50" Content="OK" Foreground="White">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border Height="{TemplateBinding Height}"
                                 Width="{TemplateBinding Width}"
                                 CornerRadius="5" Background="Black">
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>
   
  • En Ressource d’un conteneur/de la page/fenêtre/etc.
<Window.Resources>
        <ControlTemplate x:Key="ButtonControlTemplate" TargetType="{x:Type Button}">
            <Border Height="{TemplateBinding Height}"
                         Width="{TemplateBinding Width}"
                         CornerRadius="5" Background="Black">
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>
        </ControlTemplate>
    </Window.Resources>

 

  •                Dans un dictionnaire de ressources, exemple on crée « DataTemplates.xaml » dans le dossier Ressources 

 

A noter que Visual Studio offre des facilités pour définir son Template depuis la fenêtre « Structure du document »

 

sil1.png

 

 

 

On distingue les « ControlTemplate » et les « DataTemplate » (pour les contrôles affichant des listes)
Exemple d’un DataTemplate
<ListBox ItemsSource="{Binding Products}" Width="300" Height="300">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                                      <Image Source="{Binding Photo}" Width="50" />
                        <TextBlock Text="{Binding ProductName}" Width="Auto"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

  

3-TemplateBinding

Sans TemplateBinding … la taille du Template ne s’adapte pas
sil2.png

 

… Avec TemplateBinding la taille s’adapte
<Button Width="100" Height="50" Content="OK" Foreground="White">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border Height="{TemplateBinding Height}"
                                 Width="{TemplateBinding Width}"
                                 CornerRadius="5" Background="Black">
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

 

sil3.png

 

4-ContentPresenter

Dans un Template, affiche le contenu du contrôle.

Exemple : Ajoute le « OK »  
<Button Width="100" Height="50" Content="OK" Foreground="White">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border Height="{TemplateBinding Height}"
                                 Width="{TemplateBinding Width}"
                                 CornerRadius="5" Background="Black">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

 

5-ItemsPresenter

Pour les contrôles affichant des listes
<ListBox Width="300" Height="300">
            <ListBox.Template>
                <ControlTemplate>
                    <Border CornerRadius="20,20,20,20"
                            BorderThickness="5 5 5 5" BorderBrush="#FFFF957C"
                            Padding="5,5,5,5">
                        
                        <ItemsPresenter />
                    </Border>
                </ControlTemplate>
            </ListBox.Template>
            <ListBoxItem>Item 1</ListBoxItem>
            <ListBoxItem>Item 2</ListBoxItem>
        </ListBox>

Partager cet article

Repost 0
Published by Romagny13 - dans Xaml
commenter cet article

commentaires