Utilisation de Material Design avec WPF et .NET 8

Version imprimable

Bonjour,

J'essaie de styliser un calendrier avec un style Material Design et le fait de mettre une image ou du svg à la place de l'icône du calendar, le calendrier ne s'ouvre pas, je vous remercie pour votre aide.

Mon style

Code:

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
54
 
<Style x:Key="ColoredDatePickerStyle" TargetType="DatePicker">
    <Setter Property="Height" Value="30" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Background" Value="White" />
    <Setter Property="BorderBrush" Value="{StaticResource SecondaryColor}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DatePicker">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="30" />
                    </Grid.ColumnDefinitions>
 
                    <!-- Bordure -->
                    <Border Grid.ColumnSpan="2"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="4" />
 
                    <!-- Zone de texte -->
                    <DatePickerTextBox x:Name="PART_TextBox"
                                   Grid.Column="0"
                                   Padding="6,2,4,4"
                                   Background="Transparent"
                                   BorderThickness="0"
                                   VerticalContentAlignment="Center"
                                   Foreground="{TemplateBinding Foreground}" />
 
                    <!-- Bouton calendrier -->
                    <Button x:Name="PART_Button"
                        Grid.Column="1"
                        Background="Transparent"
                        BorderBrush="{x:Null}"
                        Focusable="False"
                        Cursor="Hand"
                        ToolTip="Ouvrir le calendrier">
                        <Viewbox Width="16" Height="16">
                            <Canvas Width="24" Height="24">
                    <!-- Icône calendrier  -->
                                <Path Data="M3,6 L5,6 L5,4 L7,4 L7,6 L17,6 L17,4 L19,4 L19,6 L21,6 L21,20 L3,20 Z"
                                  Fill="#F7C23E" />
                            </Canvas>
                        </Viewbox>
                    </Button>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Mon DatePicker

Code:

1
2
3
4
5
 
<StackPanel Orientation="Horizontal" Margin="0,5">
    <TextBlock Text="Date :" Width="150" VerticalAlignment="Center"/>
    <DatePicker x:Name="DatePicker" Width="200" Style="{StaticResource ColoredDatePickerStyle}"/>
</StackPanel>

Bonjour,

Je n'ai pas suffisamment de compétences dans ce domaine, avez-vous déjà regardé ce site web ?

How to style a WPF Date Picker control?

EDIT :

L'IA me propose entre parenthèse ce code

Code:

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
54
55
56
57
58
<Style x:Key="ColoredDatePickerStyle" TargetType="DatePicker">
    <Setter Property="Height" Value="30" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Background" Value="White" />
    <Setter Property="BorderBrush" Value="{StaticResource SecondaryColor}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DatePicker">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="30" />
                    </Grid.ColumnDefinitions>
 
 
                    <Border Grid.ColumnSpan="2"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="4" />
 
 
                    <DatePickerTextBox x:Name="PART_TextBox"
                                   Grid.Column="0"
                                   Padding="6,2,4,4"
                                   Background="Transparent"
                                   BorderThickness="0"
                                   VerticalContentAlignment="Center"
                                   Foreground="{TemplateBinding Foreground}" />
 
 
                    <Button x:Name="PART_Button"
                        Grid.Column="1"
                        Background="Transparent"
                        BorderBrush="{x:Null}"
                        Focusable="False"
                        Cursor="Hand"
                        ToolTip="Ouvrir le calendrier">
                        <Viewbox Width="16" Height="16" IsHitTestVisible="False">
                            <Canvas Width="24" Height="24">
                                <Path Data="M3,6 L5,6 L5,4 L7,4 L7,6 L17,6 L17,4 L19,4 L19,6 L21,6 L21,20 L3,20 Z"
                                  Fill="{Binding Path=BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
                                </Canvas>
                        </Viewbox>
                    </Button>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" Value="0.56"/>
                        <Setter TargetName="PART_TextBox" Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                    </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

À tester !

18/05/2025, 18h12
TBA_78

Bonjour,

J'ai essayé cette solution, mais le calendrier ne s'ouvre pas
19/05/2025, 09h19
fred1599

Pas de message d'erreur ?

Comment avez-vous défini la ressource StaticResource SecondaryColor ?
19/05/2025, 14h10
Pol63

je pense qu'il manque un popup
le mieux est de partir du style/controltemplate de base pour comprendre ce qu'il y a dedans, les controls nommés PART_* sont souvent utilisés dans le code behind de base

pour récupérer le style de base, poser un controle et faire clic droit / je sais plus quoi / style / copier ...

Bonjour,
comme le dit Pol63 il manque la partie nommée "PART_Popup".
Pour la part XAML, un début de réflexion :

Code:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<Window x:Class="WpfCalendarT_BA_78.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:WpfCalendarT_BA_78"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        Title="Material Design WPF" Height="350" Width="700"
        Style="{StaticResource MaterialDesignWindow}" Cursor="">
 
 
    <Window.Resources>
        <Style  x:Key="DatePickerStyle" TargetType="{x:Type DatePicker}">
            <Setter Property="Foreground" Value="#FF333333" />
            <Setter Property="IsTodayHighlighted" Value="True" />
            <Setter Property="SelectedDateFormat" Value="Short" />
            <Setter Property="Padding" Value="2" />
            <Setter Property="BorderThickness" Value="0.5" />
            <Setter Property="BorderBrush" Value="#FF333333" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <!-- Style du calendrier personnalisé -->
            <Setter Property="CalendarStyle" Value="{DynamicResource {x:Type Calendar}}" />
            <!-- Nouveau ControlTemplate personnalisé -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DatePicker}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
                                CornerRadius="4" >
                            <Grid x:Name="PART_Root" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Cursor="">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <!-- Zone de texte pour la date -->
                                <DatePickerTextBox x:Name="PART_TextBox" Grid.Column="0"  VerticalContentAlignment="Center" Padding="5,0,0,0" Margin="1"
                                             Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                                <!-- Bouton pour ouvrir le calendrier -->
                                <Button x:Name="PART_Button" Grid.Column="1" Cursor="Hand" Background="White"  VerticalContentAlignment="Top" >
                                    <Viewbox x:Name="viewbox" Width="16" Height="16" Cursor="" >
                                        <Canvas Width="16" Height="16"  >
                                            <Path  Name="Arrow" Data="M3,6 L5,6 L5,4 L7,4 L7,6 L17,6 L17,4 L19,4 L19,6 L21,6 L21,20 L3,20 Z" Fill="#F7C23E" />
                                        </Canvas>
                                    </Viewbox>
                                </Button>
                                <!-- Fenêtre contextuelle du calendrier -->
                                <Popup x:Name="PART_Popup" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_TextBox}" 
                                       IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}">
                                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
                                            Background="{TemplateBinding Background}">
                                        <Calendar x:Name="PART_Calendar" 
                                                  SelectedDate="{Binding SelectedDate, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" Cursor=""
                                                  Style="{StaticResource MaterialDesignCalendarPortrait}"/>
                                    </Border>
                                </Popup>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
 
    <Grid Background="{DynamicResource MaterialDesignPaper}" Margin="0,0,-121,0">
        <DatePicker x:Name="Dp" VerticalAlignment="Top" HorizontalAlignment="Left" Width="200" Margin="200,200,0,0" Style="{StaticResource DatePickerStyle}" />
    </Grid>
</Window>

Avec dans App.XAML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Application 
  x:Class="WpfCalendarT_BA_78.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
  StartupUri="MainWindow.xaml">
 
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:CustomColorTheme BaseTheme="Light" PrimaryColor="DarkGreen" SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
 
</Application>

Pour que votre code fonctionne, il manque donc 2 choses :
- Le Popup du calendrier qui est un élément nommé obligatoire du Template.
- Définir le style appliqué au calendrier par le biais de la propriété CalendarStyle au moyen d'un Setter.
Ce qui devrait fonctionner :

Code:

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
54
55
56
57
        <Style x:Key="ColoredDatePickerStyle" TargetType="DatePicker">
            <Setter Property="Height" Value="30" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background" Value="White" />
            <Setter Property="BorderBrush" Value="DarkGreen" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="CalendarStyle" Value="{DynamicResource {x:Type Calendar}}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="DatePicker">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="30" />
                            </Grid.ColumnDefinitions>
 
                            <!-- Bordure -->
                            <Border Grid.ColumnSpan="2"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="4" />
 
                            <!-- Zone de texte -->
                            <DatePickerTextBox x:Name="PART_TextBox"
                                   Grid.Column="0"
                                   Padding="6,2,4,4"
                                   Background="Transparent"
                                   BorderThickness="0"
                                   VerticalContentAlignment="Center"
                                   Foreground="{TemplateBinding Foreground}" />
 
                            <!-- Bouton calendrier -->
                            <Button x:Name="PART_Button"
                                Grid.Column="1"
                                Background="Transparent"
                                BorderBrush="{x:Null}"
                                Focusable="False"
                                Cursor="Hand"
                                ToolTip="Ouvrir le calendrier">
                                <Viewbox Width="16" Height="16" Margin="-12">
                                    <Canvas Width="24" Height="24">
                                        <!-- Icône calendrier  -->
                                        <Path Data="M3,6 L5,6 L5,4 L7,4 L7,6 L17,6 L17,4 L19,4 L19,6 L21,6 L21,20 L3,20 Z"
                                            Fill="#F7C23E" />
                                    </Canvas>
                                </Viewbox>
                            </Button>
                            <!-- Fenêtre contextuelle du calendrier -->
                            <Popup x:Name="PART_Popup" >
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>