Participer au site avec un Tip
Rechercher
 
Bug Suggérer des Améliorations / Corrections
Share Partager sur Facebook Partager sur Twitter
Links Notre chaîne YouTube Notre discord

Améliorations / Corrections

Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.

Emplacement :

Description des améliorations :

Utilisation de styles dans une application WPF

Nous allons chercher à mettre ne place le visuel d'une petite calculatrice. Celle-ci possédera quelques boutons (les touches de la calculatrice) et nous allons tous les « looker » avec des styles WPF. Voici une capture d'écran du style que je vous propose pour notre calculatrice.

Définition du style

Je vous propose de mettre les définitions de styles de notre calculatrice dans le fichier App.xaml. Ainsi, elles seront partagées dans toutes vos fenêtres/pages, même si dans notre exemple nous n'avons qu'une unique fenêtre pour le moment. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 

<Application x:Class="Calculator.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Calculator"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

        <SolidColorBrush x:Key="ScreenBackground" Color="#a2af77" />
        <SolidColorBrush x:Key="ButtonBackground" Color="#595959" />
        <SolidColorBrush x:Key="EqualBackground" Color="#f05a2D" />

        <SolidColorBrush x:Key="ScreenForeground" Color="black" />
        <SolidColorBrush x:Key="ButtonForeground" Color="white" />

        <sys:Int32 x:Key="FontSize">30</sys:Int32>

        <Style x:Key="ButtonBaseStyle" TargetType="{x:Type Button}">
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Margin" Value="10,10,10,10" />
            <Setter Property="Foreground" Value="{StaticResource ButtonForeground}" />
        </Style>

        <Style x:Key="NormalButtonStyle" TargetType="{x:Type Button}"
               BasedOn="{StaticResource ButtonBaseStyle}">
            <Setter Property="Background" Value="{StaticResource ButtonBackground}" />
        </Style>

        <Style x:Key="EqualButtonStyle" TargetType="{x:Type Button}"
               BasedOn="{StaticResource ButtonBaseStyle}">
            <Setter Property="Background" Value="{StaticResource EqualBackground}" />
        </Style>

    </Application.Resources>
</Application>
Définition du style à appliquer aux boutons de notre calculatrice

Définition de l'écran principal de notre calculatrice

Voici le contenu XAML permettant de définir l'écran principal de notre calculatrice. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
 47 
 48 
 49 
 50 
 51 
 52 
 53 

<Window x:Class="Calculator.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Calculator"
        mc:Ignorable="d"
        Title="MainWindow" Height="693.243" Width="621.622" Background="#363636">

    <Grid Margin="10,10,10,10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <TextBox Grid.Column="0" Grid.Row="0" Margin="10,10,10,10" Grid.ColumnSpan="4" 
                 Background="#a2af77" FontSize="60" TextAlignment="Right">0</TextBox>

        <Button Grid.Column="0" Grid.Row="1" Style="{StaticResource NormalButtonStyle}">MC</Button>
        <Button Grid.Column="1" Grid.Row="1" Style="{StaticResource NormalButtonStyle}">M+</Button>
        <Button Grid.Column="2" Grid.Row="1" Style="{StaticResource NormalButtonStyle}">/</Button>
        <Button Grid.Column="3" Grid.Row="1" Style="{StaticResource NormalButtonStyle}">*</Button>

        <Button Grid.Column="0" Grid.Row="2" Style="{StaticResource NormalButtonStyle}">7</Button>
        <Button Grid.Column="1" Grid.Row="2" Style="{StaticResource NormalButtonStyle}">8</Button>
        <Button Grid.Column="2" Grid.Row="2" Style="{StaticResource NormalButtonStyle}">9</Button>
        <Button Grid.Column="3" Grid.Row="2" Style="{StaticResource NormalButtonStyle}">-</Button>

        <Button Grid.Column="0" Grid.Row="3" Style="{StaticResource NormalButtonStyle}">4</Button>
        <Button Grid.Column="1" Grid.Row="3" Style="{StaticResource NormalButtonStyle}">5</Button>
        <Button Grid.Column="2" Grid.Row="3" Style="{StaticResource NormalButtonStyle}">6</Button>
        <Button Grid.Column="3" Grid.Row="3" Style="{StaticResource NormalButtonStyle}">+</Button>

        <Button Grid.Column="0" Grid.Row="4" Style="{StaticResource NormalButtonStyle}">1</Button>
        <Button Grid.Column="1" Grid.Row="4" Style="{StaticResource NormalButtonStyle}">2</Button>
        <Button Grid.Column="2" Grid.Row="4" Style="{StaticResource NormalButtonStyle}">3</Button>
        <Button Grid.Column="3" Grid.Row="4" Grid.RowSpan="2" Style="{StaticResource EqualButtonStyle}">=</Button>

        <Button Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2" Style="{StaticResource NormalButtonStyle}">0</Button>
        <Button Grid.Column="2" Grid.Row="5" Style="{StaticResource NormalButtonStyle}">.</Button>

    </Grid>
</Window>
Ecran principal de notre calculatrice

A titre d'exercice, vous pouver chercher à terminer le code de la calculatrice afin de la rendre opérationnelle. Bon courage.