왜 이미지가 내 버튼 안에서 부분적으로 만 보입니까?

Question

전 Windows 스토어 앱을 개발 중이며 몇 달 전에이 작업을 해봤지만 갑자기이 새로운 앱에서 이미지가 버튼 안에 제대로 표시되지 않습니다. (일이 그것의 외모가 없습니다 가지고있는, 크게 변경하지 않는 한)

<Button x:Name="ShowView" Grid.Column="1" Width="32" Height="32" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33"> 
     <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
      <Image x:Name="ShowViewImage" Source="/Assets/ShowView.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
     </StackPanel> 
    </Button> 

당신이 볼 수 있듯이

이 코드는 괜찮습니다. 그래서 무엇을 제공합니까? 이것은 지금까지 XAML 파일에서 VS가 새로운 프로젝트 인 것처럼 생성하는 데 필요한 유일한 코드입니다.

P. 또한 StackPanel을 꺼내어 Button> Image를 사용하는 방법을 시도했지만 동일한 결과가 나타납니다.

그래서, 버튼 표시 런타임에, 내가 볼 수있는 모든 이미지의 2pixels 매우 작다 (그러나 이미지는 실제로 내가 제대로 "이미지 버튼"을 표시하려면 어떻게 32x32pixels.?

Answer 1

때

버튼의 Width 및 Height이 너무 작아서 32x32 픽셀로 만들었지 만 버튼은 보이는 경계선, 경계선 및 주변에있는 공간에 대해 거의 모든 것을 사용합니다. 보더와 버튼의 내용 사이의 패딩

(가장자리 주위에 더 많은 히트 목표를 제공하기 위해 공간을 남겨 둡니다. 보이는 모양. 정확한 손가락 배치가 어려운 터치 스크린에 유용합니다.)

이미지에 남은 것은 모두 몇 픽셀입니다.

32x32 픽셀 비트 맵의 ​​중간에 충분한 공간을 남기려면 버튼을 62x52 픽셀 정도로 만들어야합니다.

앞서 언급 한 것처럼 여백이 이유가 있기는하지만 작은 Margin 및 Padding 속성을 명시 적으로 설정하면 약간 작은 버튼으로 벗어날 수 있습니다.

Answer 2

두 가지 옵션이 있으며, 예를 들어 Padding 속성은 미리 바인딩 된 패딩이 추가 된 템플릿 바인딩입니다. 따라서 Button을 Height으로 고정하고 Width을 32로 설정하면 Padding="0"은 실제 크기 인 Image에 따라 문제를 해결할 수 있습니다.

그러나 악화 될 경우 항상 자신 만의 템플릿을 만들 수 있습니다. Button 템플릿. 이렇게하는 몇 가지 쉬운 방법이 있습니다. 그 중 하나는 기본값 Button 템플릿의 복사본을 만들어 거기에있는 모든 Padding/Margin/Height/Width 크랩 프리셋을 추출하고 그 이름을 변경 한 다음 새 템플릿을 직접 버튼에 적용합니다.

<Button x:Name="ShowView" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33" 
     Style="{StaticResource YourCustomButtonTemplateForImages}"> 
    <Image x:Name="ShowViewImage" Source="/Assets/ShowView.png"/> 
</Button> 

이 아니면 ... 또 다른 옵션이 될 것이라고 포함하여 Image 당신의 버튼 내부의 ViewBox의 내부가 맞습니다 다시 규모 자체 그에 따라 설정 가능한 크기.

아, 그냥 이미지로 조금 더 깔끔하게 보이도록하려면 Background="Transparent"을 만들고 싶을 수도 있습니다.

희망이 도움이됩니다.