XAMLの丸められたボタンがウィンドウストアのアプリケーション

Question

これは2時間前に私には本当に簡単な質問だったようですが、進歩はありませんでした。

私の最初の検索最後の夜、丸いボタンを作成すると、あなただけのように、国境で、国境のエッジの周りにそれを置く,,,

<Border BorderThickness="1" 
      BorderBrush="Black" 
      CornerRadius="10" 
      Padding="4" 
      Background="#FFB8B1B1" 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center"> 
     <Button Width="45" 
       Height="35" 
       Name="GetFileName" 
       VerticalAlignment="Top" 
       VerticalContentAlignment="Top" 
       BorderThickness="0" 
       FontSize="16" 
       Foreground="Black" 
       Tapped="GetFileName_Tapped" 
       Background="#FFB8B1B1">Pick</Button> 
    </Border> 

これは良いように見えますが、私は1つのものがより良く見えたかった。ボタンの上にマウスを置くと、背景の色は変わりますが、境界線の背景は変わりません。この第二の部分を達成するために私を困らせました。どんなリードも感謝します。ありがとう、ジョン。

Answer 1

一つの可能​​性は、私はこの問題を解決するために@Mihkelの回答を使用するControlTemplateとVisualStateManager

  <Button.Template> 
      <ControlTemplate TargetType="Button"> 

       <Border BorderThickness="1" 
         x:Name="MBorder" 
         BorderBrush="Black" 
         CornerRadius="10" 
         Padding="4"> 

        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <VisualState.Setters> 
            <Setter Target="MGrid.Background" Value="#FFB8B1B1"/> 
            <Setter Target="MBorder.Background" Value="#FFB8B1B1"/> 
           </VisualState.Setters> 
          </VisualState> 

          <VisualState x:Name="PointerOver"> 
           <VisualState.Setters> 
            <Setter Target="MGrid.Background" Value="Green"/> 
            <Setter Target="MBorder.Background" Value="Green"/> 
           </VisualState.Setters> 
          </VisualState> 

          <VisualState x:Name="Pressed"> 
           <VisualState.Setters> 
            <Setter Target="MGrid.Background" Value="Blue"/> 
            <Setter Target="MBorder.Background" Value="Blue"/> 
           </VisualState.Setters> 
          </VisualState> 

          <VisualState x:Name="Disabled"/> 


         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Grid x:Name="MGrid"> 
         <ContentControl Content="{TemplateBinding Content}" 
             VerticalContentAlignment="Center" 
             HorizontalAlignment="Center" 
             FontSize="{TemplateBinding FontSize}" 
             Foreground="{TemplateBinding Foreground}"/> 
        </Grid> 

       </Border> 
      </ControlTemplate> 
     </Button.Template> 

    </Button>   

Answer 2

を使用することです。しかし、彼の答えは、国境の背景にある重要な要素を逸しています。コントロールの境界線に名前を付け、境界線でTemplateバインディングを設定しました。その後、それを参照して、ボタンの背景だけでなく。変更を太字で入れようとしていますが、**のように表示されます。星に入れられたコードは変更です。

<Button Content="Pick" 
     Width="45" 
     Height="35" 
     VerticalAlignment="Center" 
     HorizontalAlignment="Center" 
     BorderThickness="0" 
     FontSize="16" 
     Foreground="Black" 
     Tapped="GetFileName_Tapped" 
     Background="#FFB8B1B1"> 

     <Button.Template> 
      <ControlTemplate TargetType="Button"> 

       <Border BorderThickness="1" 
        BorderBrush="Green" 
        CornerRadius="10" 
        Padding="4" 
        **Background="{TemplateBinding Background}"** 


        Name="TheBorder" 
        > 

        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <VisualState.Setters> 
            <Setter Target="MGrid.Background" Value="#FFB8B1B1"/> 
            **<Setter Target="TheBorder.Background" Value="#FFB8B1B1" />** 

           </VisualState.Setters> 
          </VisualState> 

          <VisualState x:Name="PointerOver"> 
           <VisualState.Setters> 
            <Setter Target="MGrid.Background" Value="Green"/> 
            **<Setter Target="TheBorder.Background" Value="Green" />** 
           </VisualState.Setters> 
          </VisualState> 

          <VisualState x:Name="Pressed"> 
           <VisualState.Setters> 
            <Setter Target="MGrid.Background" Value="Blue"/> 
            **<Setter Target="TheBorder.Background" Value="Blue" />** 
           </VisualState.Setters> 
          </VisualState> 

          <VisualState x:Name="Disabled"/> 


         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Grid x:Name="MGrid"> 
         <ContentControl Content="{TemplateBinding Content}" 
            VerticalContentAlignment="Center" 
            HorizontalAlignment="Center" 
            FontSize="{TemplateBinding FontSize}" 
            Foreground="{TemplateBinding Foreground}" 
            Background="{TemplateBinding Background}"/> 
        </Grid> 

       </Border> 
      </ControlTemplate> 
     </Button.Template> 

    </Button> 

これは、Essential Video Editorというオープンソースプロジェクトで使用される予定です。初期のバージョンはWindowsストアにあります。ソースコードはGitHub.com/gibbloggenにあります。そして、私がこの部分を公表するとき、私は参考のためにこの投稿に信用します。