2017-09-25 3 views
-1

私はWPFのVideoTransportコントロールを最初から開発しています。これはYouTubeのようです。これは完全に拡張性があり、MVVM freindly(あなたが望む場合は参加することができます)https://github.com/Camuvingian/symmetrical-spork)ので、このコントロールを書いています。今WPFパスを使用してポーズボタンを描画する方法

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

ある場合は、私は次のコード

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

を使用して再生ボタンを生成します。

VideoTransportControl

さて、私はあなたには問題は、どのように、これはWPFのコードで行われている、2つの垂直parrallelの長方形のものを知っている、一時停止ボタンの形状を作成したいと思います。私は次のメソッドを追加しようとしました

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

しかし、これは私が言わなかった行をレンダリングします。質問:

  1. 私が必要とする一時停止ボタンを描画するにはどうすればよいですか?

お時間をいただきありがとうございます。

ps。これは進行中の作業であり、誰かが私がここに書いていないかもしれない事についてのコメントを持っているならば、彼らは歓迎されている以上のものです。

+3

あなたがコードでパスを作成する必要がありますか?そうでない場合、私は XAMLリソースファイルであなたの一時停止ボタンを保存するためにお勧めします。このウェブサイトでは、XAMLパス https://materialdesignicons.com/icon/pause としてのアイコンを提供しています。ここ一時停止ボタンを <どのように見えるかですパスデータ= "M14,19H18V5H14M6,19H10V5H6V19Z" /> –

+1

XAMLパス定義の構文を15分で学習し、「一時停止」のような長方形の場合は、独自のアイコンを作成することができます。 C#でそれをやってはいけません、それはマゾヒズムです。 –

+0

さて、私はその質問をした直後に、これを行うためのツールについて考えてみました。これらのコメントは本当に役に立ちます。ありがとう。 – MoonKnight

答えて

0

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

は例えば2つの別々のPathFiguresPathGeometryを作成します。

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

方法:PathGeometryを内に複数のサブパスを作成します。https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/how-to-create-multiple-subpaths-within-a-pathgeometry

0

すべての画像は常にベクトルグラフィックでなければなりません。

WPFの新しいアイコンを作成する前に、アプリをインストールする必要があります。

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

1)なぜAdobe Illistratorですか?彼はVectorで任意の画像を作成し、拡張子を付けてファイルを保存することができるからです。AI」

2)その後、我々はMicrosoft式デザイン

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

3を開く必要があります)を開きブレンド

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

Step 4 -

[Step 5] - Cut only tag Path 

3のパスを組み合わせて)あなたに行きますプロジェクト

は、リソースに設定されたページで

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

使用

<ContentControl ContentTemplate="{StaticResource PIPause}" 
            Height="20" 
            Width="20" /> 
関連する問題