Question

我有一个DatePicker的WPF样式，其中还设置了DatePicker的Calendar样式。看看下面的内容：

<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并将其style属性设置为datePickerGeneralStyle时，DatePicker的Calendar应该与Datepicker的宽度相同。我想要这个行为，即使没有提到日期选择器的宽度，我的意思是DatePicker应该使用容器中的可用空间或我们称之为自动宽度。

Answer 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>

Answer 2

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

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

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

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

2 个答案: