如何使用WPF路径绘制暂停按钮

I am developing a VideoTransport control from scratch in WPF, which looks like YouTube's. It is going reasonable well and looking very nice - animated etc. I am writing this control from the ground up so that it is fully extensible and MVVM freindly (you can take part if you wish https://github.com/Camuvingian/symmetrical-spork).

我正在WPF中从头开发一个VideoTransport控件,它看起来像YouTube。它是合理的,看起来非常好 - 动画等。我从头开始编写这个控件,以便它完全可扩展和MVVM友好(你可以参加,如果你希望https://github.com/Camuvingian/symmetrical -spork)。

Now, to generate the play button I use the following code

现在,为了生成播放按钮,我使用以下代码

controlGrid = GetTemplateChild("PART_ControlGrid") as Grid;
controlGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });

Path playButton = CreatePlayButton();
Grid.SetColumn(playButton, 0);
controlGrid.Children.Add(playButton);

Where the CreatePlayButton method is

CreatePlayButton方法的位置

private Path CreatePlayButton()
{
    Path p = new Path();

    p.StrokeThickness = 0.0;
    p.Fill = Brushes.Gray;

    p.HorizontalAlignment = HorizontalAlignment.Center;
    p.VerticalAlignment = VerticalAlignment.Center;

    Point start = new Point(PlayButtonSize * 0.8, PlayButtonSize / 2.0);
    LineSegment[] segments = new[]
    {
        new LineSegment(new Point(0, 0), true),
        new LineSegment(new Point(0, PlayButtonSize), true)
    };
    PathFigure figure = new PathFigure(start, segments, true);
    PathGeometry geometry = new PathGeometry(new[] { figure });

    p.Margin = new Thickness(16.0, 0, 0, 8.0);
    p.Data = geometry;

    p.MouseEnter += (s, e) => { p.Fill = Brushes.LightGray; };
    p.MouseLeave += (s, e) => { p.Fill = Brushes.Gray; };

    return p;
}

This create the correct shape and I am happy with it.

这创造了正确的形状,我很高兴。

Now, I would like to create a pause button shape, you know the one with two vertically parrallel rectangles, the issues is, how is this done in code in WPF. I have tried adding the following method

现在,我想创建一个暂停按钮形状,你知道有两个垂直平行矩形的那个,问题是,如何在WPF中的代码中完成。我尝试添加以下方法

private Path CreatePauseButton()
{
    Path p = new Path();

    p.StrokeThickness = 0.0;
    p.Fill = Brushes.Gray;

    p.HorizontalAlignment = HorizontalAlignment.Center;
    p.VerticalAlignment = VerticalAlignment.Center;

    double f = 1.0 / 7.0;
    Point start = new Point(PlayButtonSize * f, 0.0);
    LineSegment[] segments = new[]
    {
        new LineSegment(new Point(PlayButtonSize * f, PlayButtonSize), true),
        new LineSegment(new Point((PlayButtonSize * f) * 3.0, PlayButtonSize), true),
        new LineSegment(new Point((PlayButtonSize * f) * 3.0, 0.0), true),
        new LineSegment(new Point(PlayButtonSize * f, 0.0), true),
        new LineSegment(new Point((PlayButtonSize * f) * 4, PlayButtonSize), false),
        new LineSegment(new Point((PlayButtonSize * f) * 6, PlayButtonSize), true),
        new LineSegment(new Point((PlayButtonSize * f) * 6, 0.0), true),
        new LineSegment(new Point((PlayButtonSize * f) * 4, 0.0), true)
    };

    PathFigure figure = new PathFigure(start, segments, true);
    PathGeometry geometry = new PathGeometry(new[] { figure });

    p.Margin = new Thickness(16.0, 0, 0, 8.0);
    p.Data = geometry;

    p.MouseEnter += (s, e) => { p.Fill = Brushes.LightGray; };
    p.MouseLeave += (s, e) => { p.Fill = Brushes.Gray; };

    return p;
}

But this renders the line I have told it not to. Question:

但是,这使得我告诉它不要这样做。题:

1. How can I draw the pause button I require?

如何绘制我需要的暂停按钮?

Thanks for your time.

谢谢你的时间。

Ps. Please note, this is a work in progress and if anyone has any comments as to things I might not be doing write here, they are more than welcome.

PS。请注意,这是一项正在进行的工作,如果有人对我在这里写的东西有任何意见,我们非常欢迎。

3 个解决方案

#1

A pause button in XAML:

XAML中的暂停按钮:

<Grid Width="60">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle  HorizontalAlignment="Left" Height="70" Width="20"   Stroke="Black" />
    <Rectangle Grid.Column="1"  HorizontalAlignment="Right" Height="70" Width="20"  Stroke="Black" />
</Grid>

#2

Create a PathGeometry with two separate PathFigures, e.g.:

使用两个单独的PathFigures创建一个PathGeometry,例如:

private Path CreatePauseButton()
{
    Path p = new Path();

    p.StrokeThickness = 0.0;
    p.Fill = Brushes.Gray;

    p.HorizontalAlignment = HorizontalAlignment.Center;
    p.VerticalAlignment = VerticalAlignment.Center;

    double f = 1.0 / 7.0;
    Point start = new Point(PlayButtonSize * f, 0.0);

    //the left rectangle:
    LineSegment[] segments = new[]
    {
                new LineSegment(new Point(PlayButtonSize * f, PlayButtonSize), true),
                new LineSegment(new Point((PlayButtonSize * f) * 3.0, PlayButtonSize), true),
                new LineSegment(new Point((PlayButtonSize * f) * 3.0, 0.0), true),
                new LineSegment(new Point(PlayButtonSize * f, 0.0), true),
                new LineSegment(new Point((PlayButtonSize * f) * 4, PlayButtonSize), false)
            };

    //the right rectangle:

    LineSegment[] segments2 = new[]
    {
                ...
            };

    PathFigure figure = new PathFigure(start, segments, true);
    PathFigure figure2 = new PathFigure(start, segments2, true);
    PathGeometry geometry = new PathGeometry(new[] { figure, figure2 });

    p.Margin = new Thickness(16.0, 0, 0, 8.0);
    p.Data = geometry;

    p.MouseEnter += (s, e) => { p.Fill = Brushes.LightGray; };
    p.MouseLeave += (s, e) => { p.Fill = Brushes.Gray; };

    return p;
}

How to: Create Multiple Subpaths Within a PathGeometry: https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/how-to-create-multiple-subpaths-within-a-pathgeometry

如何:在PathGeometry中创建多个子路径:https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/how-to-create-multiple-subpaths-within-a-pathgeometry

#3

All images always should be in Vector grafic.

所有图像都应该是Vector Grafic。

We must install some app before create a new icon for WPF.

我们必须在为WPF创建新图标之前安装一些应用程序。

1) Adobe Illistrator
2) Microsoft Expression Design
3) Blend for Visual Studio Actualy, he alredy installed with Visual Studio   

1) Why Adobe Illistrator? Because he can create any image in Vector and save file with extension ".AI"

1)为什么选择Adobe Illistrator?因为他可以在Vector中创建任何图像并保存扩展名为“.AI”的文件

2) After that we should open Microsoft Expression Design

2)之后我们应该打开Microsoft Expression Design

[Step 1] - Open File -> Export
[Step 2] - Check Format -> WPF Canvas -> Export

3) Open Blend

3)打开混合

[Step 3] - Create WPF application - add exported pause.xaml file to project 

Step 4 - Combine path

第4步 - 结合路径

[Step 5] - Cut only tag Path

3)Go to your project

3)转到您的项目

Set in resources

设置资源

  <DataTemplate x:Key="PICloud">
            <Grid Background="Transparent">
                <Path 
                      Stretch="Fill"
                      Fill="#FFEBEBEB" 
                      Data="F1 M 451.211,145.756C 454.285,138.679 456,130.875 456,122.667C 456,90.6346 430.033,64.6666 398,64.6666C 386.175,64.6666 375.183,68.2133 366.011,74.2906C 352.761,31.2693 312.703,0 265.333,0C 232.088,0 202.459,15.4173 183.155,39.476C 172.643,34.688 160.972,32 148.667,32C 113.536,32 83.504,53.7493 71.2467,84.5093C 68.652,84.1853 66.016,84 63.3333,84C 28.356,84 -1.5625e-005,112.355 -1.5625e-005,147.333C -1.5625e-005,182.311 28.356,210.667 63.3333,210.667L 429.333,213.333C 449.952,213.333 466.667,196.619 466.667,176C 466.667,163.555 460.572,152.54 451.211,145.756 Z "/>
            </Grid>
        </DataTemplate>

Use in page

在页面中使用

<ContentControl ContentTemplate="{StaticResource PIPause}"
                                    Height="20"
                                    Width="20" />