WinUI3：DatePicker 控件顯示左右邊距

Question

我正在使用 WinUI3 的DatePicker控件。

我測試的 Windows App SDK 版本是 1.0.3 和 1.1.1。

我注意到DatePicker有時會在左側和右側顯示一些似乎是固定邊距的東西。 這會導致此控件與我在此視圖中的其他控件的對齊方式不同。

這是顯示問題的屏幕截圖。 為了顯示邊距，我在背景中添加了某種元素，因此您可以看到深灰色的DatePicker的邊距。 我還添加了兩個指向相應區域的紅色箭頭。 （順便說一句，屏幕截圖是使用“黑暗模式”拍攝的）。

在我的情況下，DatePicker 顯示在Grid的列中，它應該簡單地適應Grid列的寬度。

目前我有這個代碼：

        <DatePicker Grid.Column="2" Orientation="Horizontal" MinWidth="200" HorizontalAlignment="Stretch"
                    Date="{x:Bind Path=ViewModel.MyDate, Mode=TwoWay}"/>

我已經嘗試過為DatePicker指定負Margin ，但沒有效果。 同樣指定 0 的Padding也沒有效果。

你知道擺脫這個利潤的方法嗎？ 我會很高興有一個不需要完全重寫控制模板的解決方案。

謝謝你。

更新

我注意到這個問題似乎與DatePicker允許的最大寬度有關。 看起來它的最大寬度略小於 500 個單位。 如果您嘗試“強制”它超出此寬度，則會開始出現不需要的邊距（請參見下面的第二個屏幕截圖）。

這是重現它的完整示例：

<Grid>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>  <!-- Column for Label -->
        <ColumnDefinition Width="20"></ColumnDefinition>    <!-- Margin -->
        <ColumnDefinition Width="500"></ColumnDefinition>   <!-- Column for content -->
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <!-- Title row -->
    <TextBlock Grid.Row="0" Grid.Column="2" MinWidth="200" >Column that has 500 Width</TextBlock>

    <!-- First row with a TextBox control -->
    <TextBlock Grid.Row="1" Grid.Column="0" Text="Label for Textbox" VerticalAlignment="Center" Margin="0,0,20,0"></TextBlock>
    <TextBox Grid.Row="1" Grid.Column="2" MinWidth="200" ></TextBox>

    <!-- Second row with a DatePicker control -->
    <TextBlock Grid.Row="2" Grid.Column="0" Text="Label for DatePicker" VerticalAlignment="Center" Margin="0,0,20,0"></TextBlock>
    <DatePicker Grid.Row="2" Grid.Column="2" MinWidth="200"  HorizontalAlignment="Stretch"></DatePicker>

</Grid>

在屏幕截圖中，您可以看到TextBox控件能夠擴展到 500 的寬度，而DatePicker則不能。

Answer 1

DatePickerThemeMaxWidth資源限制了DatePicker中Button的最大寬度。 還有一個DatePickerThemeMinWidth資源。

您可以為現有控件創建自定義模板，也可以創建自己的自定義控件並覆蓋OnApplyTemplate()方法：

public class CustomDatePicker : DatePicker
{
    private Button _flyoutButton;

    public CustomDatePicker() => SizeChanged += OnSizeChanged;

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        _flyoutButton = GetTemplateChild("FlyoutButton") as Button;
        if (_flyoutButton != null)
        {
            // Note: The default value that gets overridden here for the MaxWidth is 456
            _flyoutButton.MinWidth = double.PositiveInfinity;
            _flyoutButton.MaxWidth = double.PositiveInfinity;
        }

    }

    private void OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (_flyoutButton != null)
        {
            _flyoutButton.MinWidth = ActualWidth;
            _flyoutButton.MaxWidth = ActualWidth;
        }
    }
}

XAML：

<local:CustomDatePicker Grid.Row="2" Grid.Column="2" MinWidth="200" HorizontalAlignment="Stretch" />