2017-04-24 136 views
-1

我創建了一個帶有圓角和白色背景的Button。但我需要周圍的按鈕邊框看起來像按鈕,在附截圖:添加帶有WPF邊框的按鈕

enter image description here

我開發這個代碼的按鈕:

<Button Cursor="Hand" x:Name="login" BorderBrush="Transparent" Background="White" Foreground="Black" FontSize="24" Margin="42,305,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" 
       Content="LOG IN" Grid.Column="1" FontWeight="Bold" Click="login_Click" RenderTransformOrigin="0.844,0.439" Width="101"> 
    <Button.Effect> 
     <DropShadowEffect BlurRadius="15" ShadowDepth="0"/> 
    </Button.Effect> 
    <Button.Resources> 
     <Style TargetType="{x:Type Border}"> 
      <Setter Property="CornerRadius" Value="10"/> 
      <Setter Property="Padding" Value="10,2,10,3"/> 
      <Setter Property="Background" Value="White"/> 
     </Style> 
    </Button.Resources> 
</Button> 

請給你的建議。

回答

3

你可以把BorderLinearGradientBrush圍繞Button。下面的示例標記應該給你的想法:

<Border CornerRadius="10" Padding="2" Grid.Column="1" Width="101" RenderTransformOrigin="0.844,0.439" 
       VerticalAlignment="Top" HorizontalAlignment="Left" Margin="42,305,0,10"> 
    <Border.Background> 
     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
      <GradientStop Color="LightBlue" Offset="0" /> 
      <GradientStop Color="Blue" Offset="0.75" /> 
     </LinearGradientBrush> 
    </Border.Background> 
    <Button Cursor="Hand" x:Name="login" BorderBrush="Transparent" Background="White" Foreground="Black" FontSize="24" 
        Content="LOG IN" FontWeight="Bold"> 
     <Button.Resources> 
      <Style TargetType="{x:Type Border}"> 
       <Setter Property="CornerRadius" Value="10"/> 
      </Style> 
     </Button.Resources> 
    </Button> 
</Border> 

enter image description here

+0

尼斯suggestion..thanks @ MM8 –

+1

那麼,爲什麼你基本上覆制我的答案嗎?如果您的問題已解決,請接受。 – mm8

+0

部分你發佈的答案是有用的,所以只有投了你的答案。我開發併發布了完整的答案。 –

-1

我開發了按鈕的代碼與邊框作爲同在附加的圖像,請找到下面的代碼。

<Border BorderBrush="red" BorderThickness="1" Margin="10,139,36,156" CornerRadius="10"> 
      <Border.Background> 
       <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
        <GradientStop Color="LightCyan" Offset="0.0" /> 
        <GradientStop Color="LightBlue" Offset="0.5" /> 

       </LinearGradientBrush> 
      </Border.Background> 

      <StackPanel Margin="10,10,10,0" Height="39" VerticalAlignment="Top"> 
       <Button Cursor="Hand" x:Name="lgin" BorderBrush="Transparent" Background="White" Foreground="Black" FontSize="24" VerticalAlignment="Top" HorizontalAlignment="Left" 
        Content="LOG IN" FontWeight="Bold" Click="login_Click" RenderTransformOrigin="0.844,0.439" Width="101" Height="39"> 

        <Button.Resources> 
         <Style TargetType="{x:Type Border}"> 

          <Setter Property="CornerRadius" Value="10"/> 
          <Setter Property="Padding" Value="10,2,10,3"/> 
          <Setter Property="Background" Value="White"/> 
         </Style> 

        </Button.Resources> 
        <Button.Effect> 
         <DropShadowEffect BlurRadius="15" ShadowDepth="0"/> 
        </Button.Effect> 

       </Button> 
      </StackPanel> 
     </Border> 

出把圖像如下enter image description here