使用 Style 将 Calendar 的宽度更改为其父 DatePicker 的宽度答案

【问题标题】：Change Width of Calendar to the width of its parent DatePicker using Style使用 Style 将 Calendar 的宽度更改为其父 DatePicker 的宽度
【发布时间】：2016-05-11 13:20:34
【问题描述】：

我有一个 DatePicker 的 WPF 样式，其中 DatePicker 的日历也被设置了样式。下面就来看看吧：

<Style TargetType="{x:Type DatePicker}" x:Key="datePickerGeneralStyle" BasedOn="{StaticResource {x:Type DatePicker}}">
    <Setter Property="TextElement.FontSize" Value="{StaticResource 24}" />
    <Setter Property="VerticalAlignment" Value="{StaticResource Center}" />
    <Setter Property="VerticalContentAlignment" Value="{StaticResource Center}" />
    <Setter Property="DatePicker.CalendarStyle">
        <Setter.Value>
            <Style TargetType="{x:Type Calendar}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Calendar}">
                            <Viewbox Height="{Binding DatePicker.Width}" Width="{Binding DatePicker.Width}">
                                <CalendarItem x:Name="PART_CalendarItem"
                              Background="{TemplateBinding Background}"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}"/>
                            </Viewbox>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

现在查看上面代码中的以下行：

<Viewbox Height="{Binding DatePicker.Width}" Width="{Binding DatePicker.Width}">

现在我想让这种风格通用。因此，当我声明一个 DatePicker 并将其样式属性设置为 datePickerGeneralStyle 时，DatePicker 的日历应该获得与 Datepicker 的宽度相同的宽度。即使没有提到日期选择器的宽度，我也想要这种行为，我的意思是日期选择器应该使用容器中的可用空间或我们所说的自动宽度。

【问题讨论】：

这个 {Binding DatePicker.Width} 不起作用，我想你误解了绑定在模板中是如何工作的

标签： c# wpf xaml

【解决方案1】：

您可以使用设置为RelativeSource 的绑定绑定到父控件（在本例中为DatePicker）的属性。

这是一份关于不同绑定类型和模式的精彩备忘单：

http://www.cheat-sheets.org/saved-copy/WpfBinding.pdf

注意：我已将绑定设置为 ActualWidth，因为 DatePicker 上可能未设置宽度，但它始终具有实际宽度。

我还修改了您设置字体大小、垂直对齐方式等的方式，因为您的方式似乎过于复杂。

 <Style TargetType="{x:Type DatePicker}" x:Key="datePickerGeneralStyle" BasedOn="{StaticResource {x:Type DatePicker}}">
            <Setter Property="TextElement.FontSize" Value="24" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="DatePicker.CalendarStyle">
                <Setter.Value>
                    <Style TargetType="{x:Type Calendar}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Calendar}">
                                    <Viewbox Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DatePicker}}}">
                                        <CalendarItem x:Name="PART_CalendarItem"
                              Background="{TemplateBinding Background}"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}"/>
                                    </Viewbox>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>

【讨论】：

【解决方案2】：

尝试并理解标准的 DatePicker 和 Calendar 模板，因为这可能会让您了解如何获得所需的结果

https://msdn.microsoft.com/en-us/library/cc278067(v=vs.95).aspx

https://msdn.microsoft.com/en-us/library/cc278077(v=vs.95).aspx

【讨论】：