将DatePicker附加到另一个UI元素

时间:2017-01-16 15:56:57

标签: wpf xaml mahapps.metro

我有

<StackPanel Orientation="Horizontal">
    <Label Content="{Binding WidgetSubTitle}" Style="{StaticResource WidgetSubTitleStyle}" />

    <DatePicker SelectedDate="{Binding SelectedDate}">
        <DatePicker.Resources>
            <Style TargetType="DatePickerTextBox">
                <Setter Property="Visibility" Value="Collapsed" />
                <Setter Property="IsReadOnly" Value="True" />
            </Style>
        </DatePicker.Resources>
    </DatePicker>
</StackPanel>

看起来像

enter image description here

我想摆脱日历图标,而不是“附加”#39;日期选择器到我的Label。单击标签时,我想打开选择器(在我的视图模型中具有与DateTime属性的双向绑定)。我也可以用按钮替换Label,这样我就可以从命令中受益,这不是问题。

我无法弄清楚该怎么做。我已经看到了一个将Calendar放在Popup中的解决方案,但这对我来说似乎很复杂。

我能想象的一个解决方案是 - 隐藏整个DatePicker控件(Visibility = Collapsed),当单击按钮/标签时,仅打开该选择器的日历弹出部分的可见性。虽然不能确定风格......

2 个答案:

答案 0 :(得分:1)

您必须为yor DatePicker控件编写自定义样式。它可能看起来有点像为你复杂的事情以及你提到的解决方案,但事实并非如此。它是使WPF变得如此伟大的事情之一。

在WPF ControlTemplates中,您通常有部分内容,因此Controll的实现知道如何处理哪个UI元素。

对于DatePicker,您需要PART_ButtonPART_TextBox,您需要根据自己的需要进行自定义。即删除实际按钮并为其添加标签。

你可以阅读所有你需要的东西,包括msdn的一个很好的例子。

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

答案 1 :(得分:1)

您可以通过更改其ControlTemplate来完全更改WPF控件的外观。在这种情况下,您可以为DatePicker控件定义一个自定义模板,它基本上使它看起来像一个Button,然后为Button定义另一个模板,使其看起来像Label。像这样:

<DatePicker>
    <DatePicker.Template>
        <ControlTemplate TargetType="DatePicker">
            <Grid x:Name="PART_Root" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                <Button x:Name="PART_Button">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <Label Content="{Binding WidgetSubTitle}" Style="{StaticResource WidgetSubTitleStyle}" />
                        </ControlTemplate>
                    </Button.Template>
                </Button>
                <Popup x:Name="PART_Popup" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_TextBox}" StaysOpen="False"/>
            </Grid>
        </ControlTemplate>
    </DatePicker.Template>
</DatePicker>

关于这一点的好处是即使你改变它的外观,控件的功能也会保持不变。