自定义CommandBar到PickerFlyout

时间:2016-04-25 06:09:52

标签: xaml windows-phone-8.1 win-universal-app flyout commandbar

默认PickerFlyoutcommandbar已完成并取消按钮。是否可以通过编程方式禁用完成按钮?如果没有,有没有办法添加自定义命令栏并替换默认命令栏?

在给出答案的帮助下,我试图从PickerFlyoutBase编写自定义选择器。但现在我无法在xaml中向flyout添加内容。给我错误说 custompicker不支持直接内容

<Button>
     <Button.Flyout>
                        <local:custompicker>
                            <TextBlock Margin="20" FontSize="30" Text="MyPickerFlyout Test" />
                        </local:custompicker>

                    </Button.Flyout>
    </Button


 public class custompicker:PickerFlyoutBase
        {
            private AppBar OriginalAppBar;

        private CommandBar MyCommandBar;

        private Page CurrentPage;

        public custompicker()
        {
            var cancelButton = new AppBarButton();
            cancelButton.Icon = new SymbolIcon(Symbol.Cancel);
            cancelButton.Label = "Cancel";
            cancelButton.Click += (s, e) =>
            {
                this.Hide();
            };

            MyCommandBar = new CommandBar();
            MyCommandBar.PrimaryCommands.Add(cancelButton);

            this.Closed += MyPickerFlyout_Closed;
            this.Opening += MyPickerFlyout_Opening;
            this.Placement = Windows.UI.Xaml.Controls.Primitives.FlyoutPlacementMode.Full;
        }

        private void MyPickerFlyout_Opening(object sender, object e)
        {
            CurrentPage = (Windows.UI.Xaml.Window.Current.Content as Frame).Content as Page;
            if (CurrentPage != null)
            {
                OriginalAppBar = CurrentPage.BottomAppBar;

                CurrentPage.BottomAppBar = MyCommandBar;
            }
        }

        private void MyPickerFlyout_Closed(object sender, object e)
        {
            if (CurrentPage != null)
            {
                CurrentPage.BottomAppBar = OriginalAppBar;
            }
        }

        }

1 个答案:

答案 0 :(得分:1)

PickerFlyout class有一个ConfirmationButtonsVisible property,我们可以使用此属性来禁用“完成”和“取消”按钮。

但是没有办法只禁用“完成”按钮。我们必须实现自定义“PickerFlyout”。以下是基于Flyout的简单自定义“PickerFlyout”,您可以参考它来实现自己的。

public class MyPickerFlyout : Flyout
{
    private AppBar OriginalAppBar;

    private CommandBar MyCommandBar;

    private Page CurrentPage;

    public MyPickerFlyout()
    {
        var cancelButton = new AppBarButton();
        cancelButton.Icon = new SymbolIcon(Symbol.Cancel);
        cancelButton.Label = "Cancel";
        cancelButton.Click += (s, e) =>
        {
            this.Hide();
        };

        MyCommandBar = new CommandBar();
        MyCommandBar.PrimaryCommands.Add(cancelButton);

        this.Closed += MyPickerFlyout_Closed;
        this.Opening += MyPickerFlyout_Opening;
        this.Placement = Windows.UI.Xaml.Controls.Primitives.FlyoutPlacementMode.Full;
    }

    private void MyPickerFlyout_Opening(object sender, object e)
    {
        CurrentPage = (Windows.UI.Xaml.Window.Current.Content as Frame)?.Content as Page;
        if (CurrentPage != null)
        {
            OriginalAppBar = CurrentPage.BottomAppBar;

            CurrentPage.BottomAppBar = MyCommandBar;
        }
    }

    private void MyPickerFlyout_Closed(object sender, object e)
    {
        if (CurrentPage != null)
        {
            CurrentPage.BottomAppBar = OriginalAppBar;
        }
    }
}

然后你可以在XAML中使用它,如:

<Button Content="Show Picker">
    <Button.Flyout>
        <local:MyPickerFlyout Closed="PickerFlyout_Closed">
            <TextBlock Margin="20" FontSize="30" Text="MyPickerFlyout Test" />
        </local:MyPickerFlyout>
    </Button.Flyout>
</Button>

它看起来像:
enter image description here