이미지 단추의 테두리

Question

이미지처럼 작동하는 단추가있는 동적 그리드가 있습니다. 디자인 목적을 위해 나는 그 그림들 주위에 경계선을 가지길 원한다.

EmployeeButton employeeTile = new EmployeeButton(); // inherits from Button, nothing fancy, just added three attributes for future use 
Style style = this.FindResource("NoChromeButton") as Style; 
employeeTile.Style = style; 

// make it square (like a tile) 
employeeTile.Width = Properties.Settings.Default.tileWidthInPx; 
employeeTile.Height = employeeTile.Width; 

// Create Background 
var brush = new ImageBrush(); 
brush.ImageSource = item.Source; // item is an Image (part of a foreach) 
employeeTile.Background = brush; 

// set the margin between tiles 
int margin = Properties.Settings.Default.tileMargin; 
employeeTile.Margin = new Thickness(margin, margin, margin, 0); 

// draw a border if the user wants to 
if (Properties.Settings.Default.tileBorderThickness > 0) 
{ 
    employeeTile.BorderBrush = Brushes.Black; 
    employeeTile.BorderThickness = new Thickness(Properties.Settings.Default.tileBorderThickness); 
} 

가독성을 위해 나는 내 질문에 관련되지 않은 일부 라인을 삭제 :

그래서 여기에 코드입니다.

다음은 위에 사용 된 스타일의 xaml 코드입니다. 나는 전혀 국경 바로 클릭 할 수있는 이미지가 없다, 그것은 어딘가에 유래에 내가 아무리 두께를 설정하는 방법 큰

<Style x:Key="NoChromeButton" TargetType="{x:Type Button}"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="HorizontalContentAlignment" Value="Center"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Padding" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="#ADADAD"/> 
          <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

: 생각을 찾을 수 없습니다.

Answer 1

귀하의 ControlTemplate이 같아야합니다 : 당신이 구성 요소의 BorderBrush과의 경계선 설정하지만 그들은 '원 귀하의 템플릿에 당신이 그 속성을 사용하지 않는 코드에서 BorderBrush과의 경계선을 설정하면

<ControlTemplate TargetType="{x:Type Button}"> 
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
     <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
      <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
     </Grid> 
    </Border> 

    <ControlTemplate.Triggers> 
     <Trigger Property="IsEnabled" Value="false"> 
      <Setter Property="Foreground" Value="#ADADAD"/> 
      <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

사용할 수 없습니다. ControlTemplate의 속성을 사용하여 테두리를 추가하기 만하면됩니다.