Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Strange appearance of WPF DatePicker

In my WPF application on .NET 4.0, I'm using two DatePickers and two TextBlocks in a horizontal StackPanel, and it looks like this:

enter image description here

In the left DatePicker, I experimented with a higher font size. Apart from that, there are no special settings or styles.

The buttons are aligned to the TextBlocks, but the text in the DatePicker is not.

Any idea how to change the alignment of the date text?

EDIT: Here's my XAML:

    <StackPanel Orientation="Horizontal"
                HorizontalAlignment="Right" VerticalAlignment="Bottom"
                >
        <TextBlock Text="from " />
        <DatePicker SelectedDate="{Binding FromDate, Mode=TwoWay}" FontSize="14" />
        <TextBlock Text=" until " />
        <DatePicker SelectedDate="{Binding ToDate, Mode=TwoWay}" />
    </StackPanel>
like image 987
cheesus Avatar asked Aug 31 '25 21:08

cheesus


2 Answers

Thanks Jorge, it was a Button style in the App.xaml:

    <Style TargetType="{x:Type Button}">
        <Setter Property="Margin" Value="0 5 10 5" />
    </Style>

This style applied to the button inside of the DatePicker as well.

like image 200
cheesus Avatar answered Sep 03 '25 11:09

cheesus


Assuming you are working with textblocks then you could try something like this.

    <StackPanel Orientation="Horizontal" Height="40" Margin="10">
        <Border Background="Transparent" BorderBrush="#FF2A2A89" BorderThickness="2">
        <TextBlock Width="150" Text="Testing" TextAlignment="Center"
                   VerticalAlignment="Center" />
        </Border>
        <DatePicker VerticalContentAlignment="Center" Name="datepicker" />
    </StackPanel>

The content it's really just for demonstrating. You should get something like this:

enter image description here

However If you are just showing the date why don't you use the datepicker with the default settings? It shows the selected date by default.

Another way to do it, you could use textbox instead of textblocks and set IsReadOnly as true. I'm assuming you are using textblocks so they are not editable. Using textboxes you can set VerticalContentAlignment="Center" and that's it.

like image 45
Jorge Chibante Avatar answered Sep 03 '25 09:09

Jorge Chibante