XAML扇出按钮

Question

WPF / XAML中是否存在类似于Windows 10（和Windows 8.1，我认为）屏幕键盘上的按钮控件？ 我的意思是说，当按住它们时，它们会“扇出”成多个按钮，可以将其拖到并释放时激活（即使单击距键稍有松开）。 如果没有，如何实施？

Answer 1

我不知道执行此操作的默认控件。 但是，我认为您可以通过以下方式获得此功能：

1）有一个可以选择主要文本的按钮2）创建一个包含带有默认值以及要显示的所有变体的按钮网格的弹出窗口3）保持主按钮的样式与弹出窗口中的样式一致4）显示弹出窗口时，将其放置在适当位置，以使主文本按钮与弹出窗口中显示的按钮对齐。

这是其中一些示例。 FanoutButton.xaml

<UserControl x:Class="FanoutButtonTest.FanoutButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="64" d:DesignWidth="64" FontSize="20" FontWeight="Bold">
    <Grid>
        <Button x:Name="btnMain" Background="#FFF6F6F6" Click="btnMain_Click"/>
    </Grid>
</UserControl>

背后的代码：

public partial class FanoutButton : UserControl
    {
        private string _mainText;
        private Popup _fanoutPopup;

        public string MainText { get { return _mainText; } set { SetMainText(value); } }

        public List<string> Variations { get; set; }

        public delegate void ValueClickedHandler(string value);
        public event ValueClickedHandler ValueClicked;

        public FanoutButton()
        {
            InitializeComponent();
            InitializeVariables();
        }

        private void InitializeVariables()
        {
            this.Variations = new List<string>();
        }

        private void SetMainText(string value)
        {
            _mainText = value;

            btnMain.Content = _mainText;
        }

        private void Hold()
        {
            //Calculate rows and columns for popup
            int buttonCount = 1 + this.Variations.Count;
            double squareRoot = Math.Sqrt((double)buttonCount);
            int columns = (int)Math.Ceiling(squareRoot);
            int rows = (int)Math.Round(squareRoot);

            int width = (int)this.Width * columns;
            int height = (int)this.Height * rows;

            //Get button location
            Point buttonPosition = btnMain.PointToScreen(new Point(0d, 0d));

            _fanoutPopup = new Popup();
            _fanoutPopup.Width = width;
            _fanoutPopup.Height = height;
            _fanoutPopup.HorizontalOffset = buttonPosition.X;
            _fanoutPopup.VerticalOffset = buttonPosition.Y;


            var allValues = new List<string>();
            allValues.Add(_mainText);
            allValues.AddRange(this.Variations);

            var container = new WrapPanel();
            _fanoutPopup.Child = container;

            foreach (string value in allValues)
            {
                var button = new Button();
                button.Width = this.Width;
                button.Height = this.Height;
                button.Content = value;
                button.Background = btnMain.Background;
                button.Foreground = btnMain.Foreground;
                button.Template = btnMain.Template;
                button.Tag = value;
                button.Click += button_Click;

                container.Children.Add(button);
            }

            _fanoutPopup.IsOpen = true;
        }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            string value = "";

            if (sender is Button)
            {
                value = ((Button)sender).Tag.ToString();

                _fanoutPopup.IsOpen = false;

                RaiseValueClicked(value);
            }
        }

        private void btnMain_Click(object sender, RoutedEventArgs e)
        {
            Hold();
        }

        private void RaiseValueClicked(string value)
        {
            if (ValueClicked != null)
            {
                ValueClicked(value);
            }
        }
}

MainWindow.xaml：

<Window xmlns:FanoutButtonTest="clr-namespace:FanoutButtonTest"  x:Class="FanoutButtonTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <FanoutButtonTest:FanoutButton x:Name="fbtnTest" Width="48" Height="48"/>
    </Grid>
</Window>

后面的MainWindow代码：

公共部分类MainWindow：窗口{public MainWindow（）{InitializeComponent（）;

    fbtnTest.MainText = "a";
    fbtnTest.Variations = new List<string>() { "b", "c", "d", "e", "f", "g" };
    fbtnTest.ValueClicked += fbtnTest_ValueClicked;
}

private void fbtnTest_ValueClicked(string value)
{
    MessageBox.Show("Clicked: " + value);
}

}