Home > Blockchain >  WPF How to open calendar when clicking DatePickerTextBox?
WPF How to open calendar when clicking DatePickerTextBox?

Time:06-03

Is there a way on how to open the Calendar Window when clicking DatePickerTextBox ? Currently, It will open when clicking the "PART_Button" button. So I want to also open at DatePickerTextBox "PART_TextBox"

Below is my code.

<Style TargetType="{x:Type DatePicker}">
    <Setter Property="CalendarStyle" Value="{StaticResource Calendar_Style}" />
    <Setter Property="FontFamily" Value="/Fonts/#Poppins"/>
    <Setter Property="FontSize" Value="15" />
    <Setter Property="FontWeight" Value="Regular"/>
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="SelectedDateFormat" Value="Short"/>
    <Setter Property="Padding" Value="2"/>
    <Setter Property="Focusable" Value="True" />
    <Setter Property="IsHitTestVisible" Value="True" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Background" Value="{DynamicResource Background}"/>
    <Setter Property="BorderBrush" Value="White"/>
    <Setter Property="Foreground" Value="{DynamicResource Text}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DatePicker}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" CornerRadius="4">
                    <Grid x:Name="PART_Root" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <DatePickerTextBox x:Name="PART_TextBox" Grid.Column="0" Grid.Row="0" Focusable="True" HorizontalAlignment="Left" Padding="5,0,0,0" VerticalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" 
                                           IsReadOnly="True" Background="{DynamicResource Background}" Foreground="White" 
                                           Style="{StaticResource DatePickerTextBoxStyle}" Grid.ColumnSpan="2" />

                        <Button x:Name="PART_Button" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Center" Width="40" Height="40" BorderBrush="{x:Null}">
                            <iconPacks:Octicons Kind="Calendar"/>
                        </Button>
                        <Grid x:Name="PART_DisabledVisual" Grid.ColumnSpan="2" Grid.Column="0" IsHitTestVisible="False" Opacity="0" Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Rectangle Grid.Column="1" Fill="Black" RadiusY="1" Grid.Row="0" RadiusX="1"/>
                            <Rectangle Grid.Column="0" Fill="Black" Height="18" Margin="3,0,3,0" RadiusY="1" Grid.Row="0" RadiusX="1" Width="19"/>
                            <Popup x:Name="PART_Popup" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_TextBox}" StaysOpen="False"/>
                        </Grid>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="false">
                        <Setter Property="Foreground" TargetName="PART_TextBox" Value="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource MainBrush}"/>
        </Trigger>
    </Style.Triggers>
</Style>

Thank you very much.

CodePudding user response:

You should be able to add a mouse event where you're using the DatePicker to open the dropdown for the calendar using:

private void OnClick(object sender, RoutedEventArgs e)
{
    datePicker.IsDropDownOpen = true;
}

Alternatively, you could implement a custom control over the top of the DatePicker to handle this from the control itself.

  • Related