Question

我正在为UWP使用 telerik SizeDrawer控件。在其中我希望抽屉内容在打开时覆盖整页。所以我试图绑定到页面的 Actual-Width ，但是没有用，然后我尝试用sizeChanged事件注册它，但抽屉内容的宽度仍然是0.除非我明确地将它定义为一些价值如300然后它仍然是300但我希望它覆盖全屏。

CODE

<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;

然后将其用作DrawerLength的{{1}}的一次性绑定源。

RadSideDrawer

最后，只要<primitives:RadSideDrawer x:Name="MainDrawer" DrawerLength="{x:Bind WindowWidth}" ... />的大小更新，就更新DrawerLength。

MainDrawer

另请注意，如果您不想进行绑定，可以在private void MainDrawer_SizeChanged(object sender, SizeChangedEventArgs e) => MainDrawer.DrawerLength = e.NewSize.Width;

之后立即用一行代码替换前两个步骤

InitializeComponent();

更新

当抽屉折叠时，控件本身会将其MainDrawer.DrawerLength = Window.Current.Bounds.Width;重置为Opacity，然后当您不断更新1时，抽屉的边缘可能会出来并提供糟糕的用户体验。

您可以尝试使用 Reactive Extensions 来限制页面大小更改，或者只需将抽屉的DrawerLength设置为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;
        }
    });
}

如何使RadSideDrawer的Drawer覆盖整页

1 个答案:

更新