테두리 안의 단추

Question

테두리 안에있는 단추에 문제가 있습니다. 버튼이 테두리 안의 버튼 공간을 채우고 싶지만 버튼이 테두리 아래가 아니라 테두리 아래 놓여 있어야합니다. 그리고이 방법으로 국경에 의해 만들어진 코다 반경을 숨 깁니다.

사람이 어떻게 국경 아래의 버튼을 넣어 알고 : 여기

내 문제의 사진입니다? 여기

<Button Name="filterCustomerBtn" 
     Command="{Binding Path=UpdateDepartments}" 
     Style="{StaticResource defaultButtonStyle}" 
     Width="200" 
     Margin="0, 15, 0, 0" 
     HorizontalAlignment="Center">Filter now</Button> 

은 관련 XAML 코드 : 여기

내 버튼에 대한 내 XAML입니다

<Window.Resources> 
    <Style x:Key="defaultButtonStyle" TargetType="Button"> 
     <Setter Property="Margin" Value="2"></Setter> 
    </Style> 
</Window.Resources> 


<StackPanel Orientation="Vertical" DockPanel.Dock="Top"> 
    <Border Style="{StaticResource MainBorderStyle}" Margin="2" Background="LightBlue"> 
     <StackPanel Orientation="Vertical" VerticalAlignment="Center"> 
      <Button Name="filterCustomerBtn" Command="{Binding Path=UpdateDepartments}" Style="{StaticResource defaultButtonStyle}" Width="200" Margin="0, 15, 0, 0" HorizontalAlignment="Center" Panel.ZIndex="-1">Filter now</Button> 
     </StackPanel> 
    </Border> 
</StackPanel> 

당신이 ZIndex 속성을 사용할 수 있습니다

Answer 1

당신의 테두리 코너 반경을 가지고 있기 때문에, 많은 당신이 국경과 원활한 보이게하기 위해 모서리를 둥글게 버튼의 기본 스타일의 맥락에서 할 수있는이없는 예를 들면 다음과 같습니다. 버튼을 비롯한 몇 가지 다른 컨트롤을 사용하여이 문제를 해결했습니다. 문제의 해결책은 버튼에 대한 ControlTemplate을 만드는 것입니다. 이 템플릿 내에서 버튼의 하단 모서리 반경을 원할 경우 4 모서리 모두 테두리의 모서리 반경까지 설정할 수 있습니다. 둥근 단추 템플릿을 만드는 좋은 예를 보려면 here을 클릭하십시오. 아래에서는 마우스 오버 애니메이션을 제거하여 블로그 코드를 단순화하려고 시도했습니다. 기본 서식 파일 인 것처럼 테두리 섹션에 집중하십시오.

<Style x:Key="RoundedButton" TargetType="{x:Type Button}"> 
    <Setter Property="Background" Value="{TemplateBinding Background}"/> 
    <Setter Property="Foreground" Value="{TemplateBinding Foreground}"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Padding" Value="0,0,1,1"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type Button}">       
      <Border 
       CornerRadius="5,5,5,5" 
       BorderThickness="1,1,1,1" 
       RenderTransformOrigin="0.5,0.5" 
       x:Name="border" 
       BorderBrush="#000000"> 
        <Border.RenderTransform> 
         <TransformGroup> 
          <ScaleTransform ScaleX="1" ScaleY="1"/> 
          <SkewTransform AngleX="0" AngleY="0"/> 
          <RotateTransform Angle="0"/> 
          <TranslateTransform X="0" Y="0"/> 
         </TransformGroup> 
        </Border.RenderTransform> 
        <Border 
         Background="{TemplateBinding Background}" 
         CornerRadius="5,5,5,5" 
         x:Name="border1"> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="0.5*"/> 
           <RowDefinition Height="0.5*"/> 
          </Grid.RowDefinitions> 
          <Border Grid.Row="0" CornerRadius="5,5,0,0"> 
           <Border.Background> 
            <LinearGradientBrush 
             EndPoint="0.5,1" 
             StartPoint="0.5,0"> 
             <GradientStop 
              Color="#00FFFFFF" 
              Offset="0"/> 
             <GradientStop 
              Color="#7EFFFFFF" 
              Offset="1"/> 
            </LinearGradientBrush> 
           </Border.Background> 
          </Border>         
          <ContentPresenter 
           VerticalAlignment="Center" 
           Grid.RowSpan="2" 
           HorizontalAlignment="Center" 
           x:Name="contentPresenter"/> 
         </Grid> 
        </Border> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter 
          Property="Opacity" 
          TargetName="border1" 
          Value="0.5"/> 
         <Setter 
          Property="Opacity" 
          TargetName="border" 
          Value="1"/> 
         <Setter 
          Property="Opacity" 
          TargetName="contentPresenter" 
          Value="0.5"/> 
        </Trigger> 
        <Trigger 
         Property="IsPressed" 
         Value="True"> 
         <Setter 
          Property="RenderTransform" 
          TargetName="border"> 
          <Setter.Value> 
           <TransformGroup> 
            <ScaleTransform 
             ScaleX="0.9" 
             ScaleY="0.9"/> 
            <SkewTransform 
             AngleX="0" 
             AngleY="0"/> 
            <RotateTransform 
             Angle="0"/> 
            <TranslateTransform 
             X="0" 
             Y="0"/> 
           </TransformGroup> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

또한, 여기에이 주제에 관한 MSDN 페이지로의 링크입니다.

Answer 2

결과 이미지 테두리 아래로 단추 이동

이

<Button Name="filterCustomerBtn" 
Command="{Binding Path=UpdateDepartments}" 
Style="{StaticResource defaultButtonStyle}" 
Width="200" 
Margin="0, 15, 0, 0" 
HorizontalAlignment="Center" Panel.ZIndex="-1">Filter now</Button> 

Answer 3

당신은 국경 다음 에있는 버튼을하려는 시도 ...하지만 당신은 경계 내부 내용로 있습니다. 그게 작동하지 않습니다 ..

두 행과 두 개의 열이있는 격자에 테두리를 넣고 양쪽 열에 걸쳐있는 행에 테두리와 내용을 넣은 다음 다른 행의 첫 번째 열에있는 버튼을 누른 다음 여백 당신이 그것을 원하는 국경의 위치까지 버튼.

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="20" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="348*" /> 
     <ColumnDefinition Width="155*" /> 
    </Grid.ColumnDefinitions> 
    <Border Style="{StaticResource MainBorderStyle}" 
     Margin="2" 
     Height="100" 
     Background="LightBlue" 
      Grid.ColumnSpan="2"> 
     <StackPanel Orientation="Vertical" 
       VerticalAlignment="Center"> 
     <TextBlock Text="Nothing" Width="50"/> 
    </StackPanel> 
</Border> 
<Button Name="filterCustomerBtn" 
     Grid.Column="1" 
     Grid.Row="1" 
     Command="{Binding Path=UpdateDepartments}" 
     Width="100" 
     Height="24" 
     HorizontalAlignment="Right" 
     Margin="0,-55,5,0" 
     Panel.ZIndex="100">Filter now</Button> 
</Grid>