XAML 단추 템플릿 - 광택 효과를 자동으로 단추 높이로 조절

Question

Silver 용 Expression Studio에서 단추 템플릿을 만들려고합니다. 버튼은 버튼 안에 "광택"을 나타 내기 위해 불투명도가 낮은 다른 사각형이있는 기본 사각형입니다. 버튼이 완벽하게 작동합니다. 높이가 변경된 경우를 제외하고는 "광택"사각형의 높이가 자동으로 증가하여 일반 가로 세로 비율을 유지해야합니다. 어쨌든이 일을하고 있습니까? 높이를 다른 쪽의 "50 %"와 같이 설정할 수 있습니까?

감사합니다, 다음

내 템플릿 코드 :

<Style x:Key="CloseButtonBlack" TargetType="Button"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid x:Name="grid"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition GeneratedDuration="0:0:0.2"/> 
             <VisualTransition GeneratedDuration="0" To="Pressed"/> 
            </VisualStateGroup.Transitions> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To="0.495" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              <ColorAnimation Duration="0" To="#FF333333" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" d:IsOptimized="True"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ColorAnimation Duration="0" To="#FF434343" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" d:IsOptimized="True"/> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Rectangle x:Name="Button" Fill="Black" Stroke="#FF2D2D2D"/> 
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="X"/> 
          <Rectangle x:Name="Gloss" Fill="White" Height="12" Margin="1, 1, 1, 0" Stroke="#FF2D2D2D" VerticalAlignment="Top" Opacity="0.25"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

Answer 1

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 

    <Rectangle x:Name="Button" Grid.RowSpan="2" .../> 

    <ContentPresenter Grid.RowSpan="2" .../> 

    <Rectangle x:Name="Gloss" Grid.Row="1" .../> 
    <!-- Remove the Height="12" from this element --> 
</Grid> 

이 각 행은 50 %의 총 높이 2 행 그리드를 확인하고 "광택"을 배치합니다 "Button"사각형을 전체 높이로 늘리면서 두 번째 행의 사각형을 그리드의 아래쪽 절반을 차지합니다.