帶圓邊的XAML按鈕，邊上有完美的半圓

Question

我一直在嘗試一段時間來創建一個帶圓角邊緣的圓形邊緣實際上是半圓形的按鈕。
我的想法是將CornerRadius的Border綁定到按鈕高度的一半（我知道我無法在XAML中進行計算，除了轉換器）。唉，這似乎是不可能的，因爲TemplateBinding沒有提出任何建議。

<ControlTemplate TargetType="Button"> 
    <Grid> 
     <Border CornerRadius={???}> 
      <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
           VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
           Margin="{TemplateBinding Padding}" 
           FontSize="{TemplateBinding FontSize}" 
           FontFamily="{TemplateBinding FontFamily}" /> 
     </Border> 
    </Grid> 
</ControlTemplate> 

也許我有可能創建一個從按鈕源自具有CornerRadius依賴屬性一個新的控制。但是在我繼續之前，有沒有在XAML中實現它？順便說一下，如果它很重要，我正在做一個UWP應用程序？

Answer 1

但是在我繼續之前，有沒有辦法在XAML中實現它？

是的，我認爲這是可能的。但轉換器需要

我知道有沒有辦法，我可以做在XAML的計算，也許除了一個轉換器

是的，我們需要轉換器來計算和CornerRadius是CornerRadius型，我們不能直接綁定雙重類型的Height/2。這裏我用Button的高度來計算半徑。

我的想法是將邊框的CornerRadius綁定到按鈕高度的一半。

我覺得沒有必要使用Border爲Button，Grid和ContentPresenter的ControlTemplate也有CornerRadius財產。

例如這裏：

<ControlTemplate TargetType="Button"> 
    <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" 
      CornerRadius="{Binding Height, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource cvt}}"> 
     <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          ContentTemplate="{TemplateBinding ContentTemplate}" 
          ContentTransitions="{TemplateBinding ContentTransitions}" 
          Content="{TemplateBinding Content}" 
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
          Padding="{TemplateBinding Padding}" 
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
          CornerRadius="{Binding Height, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource cvt}}" /> 
    </Grid> 
</ControlTemplate> 

<local:HeightToCornerRadiusConverter x:Key="cvt" /> 

我HeightToCornerRadiusConverter是這樣的：

public class HeightToCornerRadiusConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     var height = (double)value; 
     CornerRadius radius = new CornerRadius(height/2); 
     return radius; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { 
     throw new NotImplementedException(); 
    } 
} 

這裏有一個問題，因爲你可以看到CornerRadius綁定到Button的Height，所以當我們使用這種風格時，我們需要將高度設置爲Button非常重要。