Zum Inhalt springen

WPF ControlTemplates


Gewinde

Empfohlene Beiträge

Hallo zusammen,

falls jemand von euch ein gutes Forum ( vorzugsweise in deutsch) für WPF kennen sollte, wäre ich darüber begeistert wenn er die Adresse mit mir teilen würde. Als ich gerade in das Forum gehuscht bin, kam mir der Gedanke, dass ich ziemlich viele Fragen stelle. Da ich wahrscheinlich noch viele Fragen zu eigenen Styles der WPF haben, habe ich das Thema mal etwas Allgemeiner ausfallen lassen. Ich bin gerade dabei einen eigenen DatePicker Style zu entwerfen. Mal abgesehen davon, dass der Aufbau ziemlich kompliziert ist, da dieses Control aus zig verschiedenen Komponenten besteht, geht es in diesem Fall konkret um die DatePickerTextBox. Ich würde gerne in meinem Style den weißen Rand, welcher noch auf dem Bild zu sehen ist, verschwinden lassen. Mit einem eigenen DatePickerTextBoxTemplate bin ich nicht zum gewünschten Ergebnis gekommen. Durch ein Template bin ich nur zu einer TextBox in einer TextBox gekommen. Der eingefügte ContentPresenter bewirkt leider nicht die Anzeige des Textes des DatePickerControls. Ein Borderbrush führte auch nicht zum Ziel.

(CalenderStyle u.s.w. ist noch nicht implementiert)

Screenshot2024-01-14162442.thumb.png.66fc0faf397eab0e0f45df7aaf7e54d9.png

 

Hier noch etwas Xaml Code dazu:

    <!-- DatePickerStyle with Colors -->
    
    <Style x:Key="dp_CustomDatePicker" TargetType="DatePicker">
        <Setter Property="IsTodayHighlighted" Value="True"/>
        <Setter Property="SelectedDateFormat" Value="Short"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="Foreground" Value="{DynamicResource tb_ForgroundNormal}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DatePicker">
                    <Grid x:Name="PART_Root">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="30"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="dp_Border"
                                Grid.ColumnSpan="2"
                                Background="{DynamicResource dp_backgroundNormal}"
                                BorderBrush="{DynamicResource dp_borderNormal}"/>

                        <DatePickerTextBox x:Name="PART_TextBox"
                                           Grid.Column="0"
                                           Foreground="{TemplateBinding Foreground}"
                                           Background="Transparent"
                                           Margin="2"
                                           VerticalAlignment="Center"
                                           HorizontalAlignment="Center">
                            
                        </DatePickerTextBox>
                        
                        <Button x:Name="PART_Button"
                                Grid.Column="1"
                                Style="{DynamicResource dp_Button}">
                        </Button>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- DatePicker TextBox with Colors -->

    <Style x:Key="dp_TextBox" TargetType="DatePickerTextBox">
        <Setter Property="Margin" Value="2"/>
        <Setter Property="Height" Value="25"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="IsTabStop" Value="True"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Background" Value="{DynamicResource tb_BackgroundNormal}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource tb_BorderNormal}"/>
        <Setter Property="Foreground" Value="{DynamicResource tb_ForgroundNormal}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DatePickerTextBox">
                    <Grid>
                        <Border x:Name="tb_Border"
                                BorderThickness="1"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Background="{TemplateBinding Background}">
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <SolidColorBrush x:Key="tb_BorderNormal" Color="#FF4A4747"/>

    <SolidColorBrush x:Key="tb_BackgroundNormal" Color="#FF504D4D"/>

    <SolidColorBrush x:Key="tb_ForgroundNormal" Color="#FFDFDEE4"/>

    <!-- DatePicker CalendarDropDownButton with Colors -->

    <Style x:Key="dp_Button" TargetType="Button">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Margin" Value="2"/>
        <Setter Property="Height" Value="25"/>
        <Setter Property="Width" Value="25"/>
        <Setter Property="BorderBrush" Value="{DynamicResource btn_BorderNormal}"/>
        <Setter Property="Background" Value="{DynamicResource btn_BackgroundNormal}"/>
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect ShadowDepth="2" BlurRadius="-50" Opacity="0.8" Color="#FF2D2C2C"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Border x:Name="btn_Border"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Background="{TemplateBinding Background}"
                                BorderThickness="1">
                            <Grid
                                Background="Transparent">
                                <Image
                                    Margin="2"
                                    Source="/Assets/icons8-kalender-64.png"/>
                            </Grid>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" Value="{DynamicResource btn_BorderFocused}"/>
                            <Setter Property="Background" Value="{DynamicResource btn_BackgroundFocused}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="BorderBrush" Value="{DynamicResource btn_BorderPressed}"/>
                            <Setter Property="Background" Value="{DynamicResource btn_BackgroundPressed}"/>
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <DropShadowEffect ShadowDepth="1"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <EventTrigger RoutedEvent="PreviewMouseDown">
                            <SoundPlayerAction Source="F:\VisualStudioSolutions\DatePickerStyle\DatePickerStyle\Assets\mixkit-on-or-off-light-	 switch-tap-2585.wav"/>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <SolidColorBrush x:Key="btn_BackgroundNormal" Color="#FF333131"/>
    <SolidColorBrush x:Key="btn_BackgroundFocused" Color="#FF504D4D"/>
    <SolidColorBrush x:Key="btn_BackgroundPressed" Color="#FF696565"/>

    <SolidColorBrush x:Key="btn_BorderNormal" Color="#FF4A4747"/>
    <SolidColorBrush x:Key="btn_BorderFocused" Color="#FF6D6767"/>
    <SolidColorBrush x:Key="btn_BorderPressed" Color="#FF8A8484"/>

Danke euch :)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...