I wanted to edit calendar day buttons, after some try and error i did it but it also made the day of the week so close together. I tried to find anything on web but i didn't see anything.

<!-- Styl dla Button w kalendarzu DatePicker (daty) -->
<Style TargetType="Button" x:Key="CalendarDateButtonStyle">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="#3E053A"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="FontStretch" Value="SemiExpanded"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border 
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     Background="{TemplateBinding Background}"
                     Padding="{TemplateBinding Padding}">
                    <ContentPresenter 
                         Content="{TemplateBinding Content}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="3"/>
        </Style>
    </Style.Resources>

    <Style.Triggers>
        <!-- Zmieniamy tylko obramowanie i tekst przy najechaniu myszką -->
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="BorderBrush" Value="White"/>
            <!-- Obramowanie przycisku -->
            <Setter Property="Foreground" Value="Black"/>
            <!-- Kolor tekstu -->
            <Setter Property="Background" Value="#FDE5FB"/>
            <!-- Tło pozostaje przezroczyste -->
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BorderBrush" Value="#6e0968"/>
            <!-- Obramowanie przycisku -->
            <Setter Property="Foreground" Value="Black"/>
            <!-- Kolor tekstu -->
            <Setter Property="Background" Value="#FDE5FB"/>
            <!-- Tło pozostaje przezroczyste -->
        </Trigger>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True">
            <Setter Property="BorderBrush" Value="#6e0968"/>
            <!-- Obramowanie przycisku -->
            <Setter Property="Foreground" Value="Black"/>
            <!-- Kolor tekstu -->
            <Setter Property="Background" Value="#FDE5FB"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding IsToday, RelativeSource={RelativeSource Self}}" Value="True">
            <Setter Property="Background" Value="#FFFFFF"/>
            <Setter Property="BorderBrush" Value="#FDE5FB"/>
            <Setter Property="Foreground" Value="#6e0968"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

can someone tell me what could happend or what i miss in styling? (ismouseover doesnt work on it and sorry for my english) not working calendar lol

I wanted to edit calendar day buttons, after some try and error i did it but it also made the day of the week so close together. I tried to find anything on web but i didn't see anything.

<!-- Styl dla Button w kalendarzu DatePicker (daty) -->
<Style TargetType="Button" x:Key="CalendarDateButtonStyle">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="#3E053A"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="FontStretch" Value="SemiExpanded"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border 
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     Background="{TemplateBinding Background}"
                     Padding="{TemplateBinding Padding}">
                    <ContentPresenter 
                         Content="{TemplateBinding Content}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="3"/>
        </Style>
    </Style.Resources>

    <Style.Triggers>
        <!-- Zmieniamy tylko obramowanie i tekst przy najechaniu myszką -->
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="BorderBrush" Value="White"/>
            <!-- Obramowanie przycisku -->
            <Setter Property="Foreground" Value="Black"/>
            <!-- Kolor tekstu -->
            <Setter Property="Background" Value="#FDE5FB"/>
            <!-- Tło pozostaje przezroczyste -->
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BorderBrush" Value="#6e0968"/>
            <!-- Obramowanie przycisku -->
            <Setter Property="Foreground" Value="Black"/>
            <!-- Kolor tekstu -->
            <Setter Property="Background" Value="#FDE5FB"/>
            <!-- Tło pozostaje przezroczyste -->
        </Trigger>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True">
            <Setter Property="BorderBrush" Value="#6e0968"/>
            <!-- Obramowanie przycisku -->
            <Setter Property="Foreground" Value="Black"/>
            <!-- Kolor tekstu -->
            <Setter Property="Background" Value="#FDE5FB"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding IsToday, RelativeSource={RelativeSource Self}}" Value="True">
            <Setter Property="Background" Value="#FFFFFF"/>
            <Setter Property="BorderBrush" Value="#FDE5FB"/>
            <Setter Property="Foreground" Value="#6e0968"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

can someone tell me what could happend or what i miss in styling? (ismouseover doesnt work on it and sorry for my english) not working calendar lol

• wpf

• How you apply your Style to DatePicker? I guess it has nothing to do with the template of day title of week which defines its apperance including the width. Then, what is your actual question? – emoacht Commented Mar 19 at 17:10
• Maybe just "scale" the whole thing (using a ViewBox or a ScaleTransform). If you "enlarge" the contents, the container has to be able to "stretch" otherwise. – Gerry Schmitz Commented Mar 19 at 17:40
• @emoacht i dont really understand your comment, can you elaborate? – Crystal Commented Mar 20 at 8:13
• @GerrySchmitz i would love to but i cant. Not only it would take really long because of amound pages i have, also every change i need to agree with my collegue and this calendar takes a lot of space already – Crystal Commented Mar 20 at 8:18
• @Crystal You shown a Style for Button but defining a Style is not enough to reflect that Style to the Calender of DatePicker. I am asking what you did. – emoacht Commented Mar 20 at 22:49

1 Answer 1

What you missed is the Margin of ContentPresenter which is present in the default Style of CalendarDayButtonStyle.

<Style TargetType="CalendarDayButton" x:Key="CalendarDayButtonStyle">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CalendarDayButton">
                <Grid>
                    ...
                    <ContentPresenter x:Name="NormalText"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Margin="5,1,5,1">
                        ...
                    </ContentPresenter>
                    ...
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

Said that, I had difficulty in reproducing the screenshot of Calendar. Finally I found that there is difference between day title of week in WPF of .NET Framework and equivalent of .NET (8.0, for example).

What you posted is the Calendar of the former in Polish (pl-PL) while the Calendar of the latter looks like below.

As you see, the only first letters of day title of week are shown. So, if you were working on WPF of .NET, you might not notice this issue. For your reference, this difference is caused by the values of CultureInfo.DateTimeFormat.ShortestDayNames.

On the other hand, I don't think the way of default Style to define the width of columns of Calendar table is optimal because it can be better handled in the template of day title of week, CalendarItem.DayTitleTemplateResourceKey. For example, you can edit the default DataTemplate so that TextBlock is contained in Grid which defines the width of columns.

<DataTemplate x:Key="{x:Static CalendarItem.DayTitleTemplateResourceKey}">
    <Grid Width="24">
        <TextBlock Margin="0,6,0,6"
                   HorizontalAlignment="Center" VerticalAlignment="Center"
                   Foreground="Black"
                   FontFamily="Verdana" FontWeight="Bold" FontSize="9.5"
                   Text="{Binding}"/>
    </Grid>
</DataTemplate>

If you are interested, you can find this default DataTemplate in the ControlTemplate.Resources of default Template of CalendarItem of Calendar.