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 , 抽屉的边缘可能会出来并给用户带来糟糕的体验。

您可以尝试使用 Reactive Extensions 来限制页面大小的变化，或者您可以简单地将抽屉的 Opacity 设置回 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;
        }
    });
}