c# - 如何让RadSideDrawer的Drawer覆盖整个页面

Question

我正在为 UWP 使用 telerik SizeDrawer 控件。我希望抽屉内容在打开时覆盖整页。所以我尝试绑定(bind)到页面的 Actual-Width ，但这不起作用，然后我尝试使用 sizeChanged 事件注册它，但抽屉内容的宽度仍然保持为 0。除非我明确将其定义为像 300 这样的值，那么它仍然是 300，但我希望它覆盖全屏。

代码

<telerik:RadSideDrawer Name="MainDrawer" SizeChanged="MainDrawer_SizeChanged"
                       Loaded="MainDrawer_Loaded">
    <telerik:RadSideDrawer.MainContent>
        <Grid />

    </telerik:RadSideDrawer.MainContent>
    <telerik:RadSideDrawer.DrawerContent>
        <Grid  Name="DrawerGrid" Background="Yellow">

        </Grid>
    </telerik:RadSideDrawer.DrawerContent>
</telerik:RadSideDrawer>

C#

private void MainDrawer_SizeChanged(object sender, SizeChangedEventArgs e)
{
    DrawerGrid.Width = e.NewSize.Width;
}
private void MainDrawer_Loaded(object sender, RoutedEventArgs e)
{
    DrawerGrid.Width = MainDrawer.Width;
}

请注意，抽屉网格的高度是可以的，可以拉伸(stretch)到全屏，但宽度保持为 0，如果宽度完全不变，则固定为 240。

Answer 1

这就是你要做的 -

首先，定义一个 double 属性，用于获取当前Window 的宽度。

public double WindowWidth => Window.Current.Bounds.Width;

然后将其用作 RadSideDrawer 的 DrawerLength 的一次性绑定(bind)源。

<primitives:RadSideDrawer x:Name="MainDrawer"
                          DrawerLength="{x:Bind WindowWidth}" ... />

最后，只要 MainDrawer 的大小更新，就更新 DrawerLength。

private void MainDrawer_SizeChanged(object sender, SizeChangedEventArgs e) => 
    MainDrawer.DrawerLength = e.NewSize.Width;

---

另请注意，如果您不想进行绑定(bind)，可以在 InitializeComponent(); 之后用一行代码替换前两个步骤

MainDrawer.DrawerLength = Window.Current.Bounds.Width;

---

更新

看起来当抽屉折叠时，控件本身会将其 Opacity 重置回 1，然后当您不断更新 DrawerLength 时，抽屉的边缘可能会出来并带来糟糕的用户体验。

您可以尝试使用响应式扩展来限制页面大小变化，或者您可以简单地将抽屉的不透明度设置回0已经塌陷了。

为此，您只需监视 DrawerState 属性，并在其 Closed 时将 DrawerGrid.Opacity 设置为 0.

但请记住，在展开之前，您还需要将其设置回 1。不幸的是，没有 Opening 状态，并且 Opened 触发得太晚，因此您必须找到菜单按钮并在其 Click 事件中执行此操作.

public MainPage()
{
    InitializeComponent();

    MainDrawer.DrawerLength = Window.Current.Bounds.Width;

    Loaded += (s, e) =>
    {
        // GetChildByName: https://github.com/JustinXinLiu/Continuity/blob/master/Continuity/Extensions/UtilExtensions.cs#L44
        var menuButton = MainDrawer.GetChildByName<Button>("PART_SideDrawerButton");
        menuButton.Click += (s1, e1) => DrawerGrid.Opacity = 1;
    };

    MainDrawer.RegisterPropertyChangedCallback(RadSideDrawer.DrawerStateProperty, (s, e) =>
    {
        var state = MainDrawer.DrawerState;

        if (state == DrawerState.Closed)
        {
            DrawerGrid.Opacity = 0;
        }
    });
}