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

Question

我正在为 UWP 使用 telerik SizeDrawer 控件。在其中，我希望抽屉内容在打开时覆盖整页。因此，我尝试绑定到页面的 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;
}

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

Answer 1

这就是你的做法-

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

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

然后将它用作您的RadSideDrawer 的DrawerLength 的一次性绑定源。

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

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

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

---

另外注意如果你不想做绑定，可以用一行代码替换前两步，就在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;
        }
    });
}