c# - MaterialDesignInXamlToolkit ElementHost DatePicker 选择/当前日期未正确显示

Question

对于生产应用程序，我们希望在 Windows 窗体应用程序的 ElementHost 中显示 DatePicker，但我们遇到了 SelectedDate 和 CurrentDate 不可读的问题，因为不会显示数字。

我们在MaterialDesignInXamlToolkit的xaml风格中找不到问题，因为我们经验不够。

它在github 项目页面上已经是一个问题，但似乎没有人回答或查看它。
还有一个带有重现错误的github 存储库。

标签： c#wpfxamlmaterial-design

Answer 1

您正在寻找的行为可以通过适当的样式/模板自定义来实现。案件的症结在于简单地消除中的一个ObjectAnimationUsingKeyFrames存在。此外，为了应用这种定制，需要考虑和之间的HAS A关系。这是一个教科书案例，非常方便。ControlTemplateCalendarDayButtonCalendarDayButtonCalendarDatePickerBasedOn

这是解决问题的 XAML：

<Style x:Key="MyCalendarDayButton"
       TargetType="CalendarDayButton"
       BasedOn="{StaticResource MaterialDesignCalendarDayButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CalendarDayButton}">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.1" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBackground"/>
                                    <!--
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="NormalText">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{DynamicResource PrimaryHueMidForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    -->
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CalendarButtonFocusStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="CalendarButtonFocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DayButtonFocusVisual">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="CalendarButtonUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DayButtonFocusVisual">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ActiveStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Active"/>
                            <VisualState x:Name="Inactive"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DayStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="RegularDay"/>
                            <VisualState x:Name="Today">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TodayBackground"/>
                                    <!--
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="NormalText">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{DynamicResource PrimaryHueLightForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    -->
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="BlackoutDayStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="NormalDay"/>
                            <VisualState x:Name="BlackoutDay">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightingBorder"/>
                                    <DoubleAnimation Duration="0" To="0.38" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalText"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Ellipse x:Name="TodayBackground" Fill="{DynamicResource PrimaryHueLightBrush}" Opacity="0"/>
                    <Ellipse x:Name="SelectedBackground" Fill="{DynamicResource PrimaryHueMidBrush}" Opacity="0"/>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                    <Border x:Name="HighlightingBorder" Opacity="1">
                        <Ellipse x:Name="HighlightBackground" Fill="{DynamicResource PrimaryHueDarkBrush}" Opacity="0"/>
                    </Border>
                    <ContentPresenter x:Name="NormalText" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" TextElement.Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Ellipse x:Name="DayButtonFocusVisual" Opacity="0" Stroke="{DynamicResource PrimaryHueDarkBrush}" StrokeThickness="1" Visibility="Collapsed"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="MyCalendarStyle" 
       TargetType="Calendar"
       BasedOn="{StaticResource MaterialDesignDatePickerCalendarPortrait}">
    <Setter Property="CalendarDayButtonStyle" Value="{StaticResource MyCalendarDayButton}"/>
</Style>

<Style x:Key="MyDatePickerStyle" 
       TargetType="DatePicker" 
       BasedOn="{StaticResource MaterialDesignDatePicker}">
    <Setter Property="CalendarStyle" Value="{StaticResource MyCalendarStyle}"/>
</Style>    

这是上面显示的自定义样式与原始标准样式之间的并排比较MaterialDesign：

此示例项目的完整源代码解决方案可在GitHub上找到。