如何使用WPF在控件中绘制动态线

Question

我正在使用WPF来创建一个简单的按钮，我正在添加一个我想要的简单按钮，其大小总是与按钮相同，减去每边一个像素。

问题是我不知道如何使用按钮的width属性来使用它。

有人可以帮忙吗？

感谢。

<UserControl
Name="UC_Button_Close"    
x:Class="Colman_UC.UC_Button_Close"
xmlns=    "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=  "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d=  "http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" RenderTransformOrigin="0,0" 
HorizontalAlignment="Left" 
VerticalAlignment="Top">

<Grid MinWidth="70" MinHeight=" 30" Height=" 30" Width=" 70">
    <Rectangle x:Name="MainRectangle" Stroke="Black" StrokeThickness="1" >
        <Rectangle.BitmapEffect >
            <DropShadowBitmapEffect Opacity="0.2" ShadowDepth="0" />
        </Rectangle.BitmapEffect>
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFAECAD2" Offset="1" />
                <GradientStop Color="#FFB9D5DD" Offset="0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

    <!-- Here is the line concerned -->
    <Line x:Name="RectangleLight" Stroke="white" X1="1" Y1="1" X2="69" Y2="1"/>
    <TextBlock x:Name="MainText" HorizontalAlignment="Center"  
               VerticalAlignment="Center"  Margin="0,0,0,0" Text="Button" 
               FontFamily="Avenir" />        
</Grid>

Answer 1

这是你的案例的按钮样式

<Button Height="30" MinHeight="30" MinWidth="70" Width="70" Content="Button" FontFamily="Avenir">
  <Button.Template>
    <ControlTemplate TargetType="Button">
      <Grid>
        <Rectangle x:Name="MainRectangle" Stroke="Black" StrokeThickness="1">
          <Rectangle.BitmapEffect>
            <DropShadowBitmapEffect Opacity="0.2" ShadowDepth="0"/>
          </Rectangle.BitmapEffect>
          <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
              <GradientStop Offset="1" Color="#FFAECAD2"/>
              <GradientStop Offset="0" Color="#FFB9D5DD"/>
            </LinearGradientBrush>
          </Rectangle.Fill>
        </Rectangle>
        <Rectangle Height="1" Margin="1,1,1,0" VerticalAlignment="Top" Stroke="White" StrokeThickness="1"/>
        <ContentPresenter HorizontalAlignment="Center" Margin="2" VerticalAlignment="Center" RecognizesAccessKey="True"/>
      </Grid>
    </ControlTemplate>
  </Button.Template>
</Button>

这与DropShadowEffect相同

<Button Height="30" MinHeight="30" MinWidth="70" Width="70" Content="Button" FontFamily="Avenir">
  <Button.Template>
    <ControlTemplate TargetType="Button">
      <Grid>
        <Rectangle x:Name="MainRectangle" Stroke="Black" StrokeThickness="1">
          <Rectangle.Effect>
            <DropShadowEffect Opacity="0.3" ShadowDepth="0" BlurRadius="5"/>
          </Rectangle.Effect>
          <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
              <GradientStop Offset="1" Color="#FFAECAD2"/>
              <GradientStop Offset="0" Color="#FFB9D5DD"/>
            </LinearGradientBrush>
          </Rectangle.Fill>
        </Rectangle>
        <Rectangle Height="1" Margin="1,1,1,0" VerticalAlignment="Top" Stroke="White" StrokeThickness="1"/>
        <ContentPresenter HorizontalAlignment="Center" Margin="2" VerticalAlignment="Center" RecognizesAccessKey="True"/>
      </Grid>
    </ControlTemplate>
  </Button.Template>
</Button>

希望有所帮助