DatePicker의 아이콘을 바꿔봤는데 클릭해도 달력 팝업이 안 뜨네요

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

DatePicker에 달려있는 아이콘을 바꿔보았습니다.
그런데 아이콘을 클릭해도 달력이 안 뜨네요.
클릭 이벤트 함수에 디버깅 걸어서 클릭할 때마다 IsDropDownOpen이 True, False 왔다갔다 하는 건 확인했습니다.

아니면 아이콘 변경하는 다른 방법이 있을까요?

<StackPanel Orientation="Horizontal" Margin="0 10 0 0">
    <TextBlock Text="일자" Width="48"/>
    <DatePicker x:Name="datePicker" Width="210" >
        <DatePicker.Resources>
            <Style TargetType="DatePickerTextBox">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <TextBox x:Name="datePickerText"
                     Text="{Binding Path=SelectedDate, StringFormat='yyyy-MM-dd', RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}}"
                     Background="{TemplateBinding Background}"
                     BorderThickness="0"
                     IsReadOnly="True">
                                <TextBox.Style>
                                    <Style TargetType="TextBox">
                                        <Setter Property="Padding" Value="2"/>
                                        <Setter Property="HorizontalAlignment" Value="Left"/>
                                    </Style>
                                </TextBox.Style>
                            </TextBox>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </DatePicker.Resources>
        <DatePicker.Template>
            <ControlTemplate TargetType="DatePicker">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="184"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Border BorderBrush="DarkGray" BorderThickness="1 1 0 1">
                        <DatePickerTextBox x:Name="datePickerText" BorderBrush="Black" BorderThickness="1 1 0 1" Grid.Column="0" Margin="2,0,0,0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                    </Border>

                    <Border Grid.Column="1"  BorderBrush="DarkGray" BorderThickness="1 1 1 1">
                        <Button Style="{StaticResource btnIconStyle}" Width="24" Click="DatePicker_Click" >
                            <Image Source="icon.png"/>
                        </Button>
                    </Border>
                </Grid>
            </ControlTemplate>
        </DatePicker.Template>
    </DatePicker>
</StackPanel>

private void DatePicker_Click(object sender, RoutedEventArgs e)
{
    datePicker.IsDropDownOpen = !datePicker.IsDropDownOpen;
}
2개의 좋아요
2

참고 해보시면 좋을 것같습니다.

2개의 좋아요
3

@qvist 엇 소스코드가 정확히 이해가 가질 않네요?

@donghun_lee 님의 조언과 마찬가지로, 아래 실제 기본으로 제공되는 DatePicker 구성을 함께 보시면서 작업을 해보시는 것이 좋습니다.

위의 내용을 살펴보면, DatePicker를 구성하는 최소한의 부분들이 누락된 것 같습니다.

특히 PART_ 부분이 모두 누락된 것 같습니다. 저도 DatePicker를 많이 다뤄보지 않아서 정확히 말씀드릴 순 없지만, IsDropDownOpen은 컨트롤 내부적으로 동작하여 PART_Popup을 Open/Close 해주는 것으로 예상됩니다.

아 말나온김에 찾아보죠…

image

https://github.dev/dotnet/wpf/blob/47cf91bf2e375466c9584967cf082b4fc3bcc6ab/src/Microsoft.DotNet.Wpf/src/PresentationFramework/System/Windows/Controls/DatePicker.cs#L659

진행해보시면서 계속 추가질문 해주세요!

1개의 좋아요
4

같은 문제가 있었고, 이 글에서 아이디어를 얻어 팝업창도 xaml단에 선언해주는것으로 해결했습니다. 혹시 같은 문제를 겪는분이 계실까 해결한 코드 남기고갑니다!! 도와주셔서감사합니당:)

<Window.Resources>
    <Style TargetType="DatePicker">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderBrush" Value="#888"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="2"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DatePicker">
                    <Grid x:Name="Root" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="20" />
                        </Grid.ColumnDefinitions>

                        <DatePickerTextBox x:Name="PART_TextBox"
                                       Grid.Column="0"
                                       Background="Black"
                                       Foreground="White"
                                       BorderBrush="{TemplateBinding BorderBrush}"
                                       BorderThickness="0"
                                       Padding="2"
                                       HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />

                        <Button x:Name="PART_Button"
                            Grid.Column="1"
                            Focusable="False"
                            IsTabStop="False"
                            Background="Transparent"
                            BorderThickness="0"
                            Margin="0">
                            <Image Source="pack://application:,,,/Image/Icon_calendar2x.png"
                               Width="16"
                               Height="16"
                               Stretch="Uniform"/>
                        </Button>

                        <Popup x:Name="PART_Popup"
                           Placement="Bottom"
                           AllowsTransparency="True"
                           Focusable="False"
                           IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                           PopupAnimation="Slide">
                            <Border x:Name="PART_PopupBorder"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}">
                                <Calendar x:Name="PART_Calendar"
                                      IsTodayHighlighted="True"
                                      SelectedDate="{Binding SelectedDate, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                      DisplayDate="{Binding DisplayDate, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                      SelectionMode="SingleDate"/>
                            </Border>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
1개의 좋아요