2017-09-26 8 views
0

XAML UWP 응용 프로그램에서 Button을 확장하는 클래스를 지정합니다. Ive가 Background ImageBrush를 설정했습니다.XAML UWP 사용자 지정 단추의 backgound 포커스

내 버튼은 포커스가 있거나 mouseover 이벤트가 발생하면 내 버튼에 검은 색 테두리가있는 회색 사각형이 나타납니다.

필자는 이벤트의 다양한 종류 (gotFocus, mouseEntered, mouseover)에 수정 FocusVisualPrimary/SecondaryBrush에 전경을 변경, 많은 용액 shitton 시도. 아무 것도 작동하지 않았으므로 최상의 결과를 얻으려면 button.Background = "originalBitmapImage"mouseover 이벤트 (원래 배경과 동일한 이미지 경로로 새 ImageBrush를 만든 다음 BackGround에 할당 함)에 마우스 오버가 발생하면 이미지가 모두 깜박입니다. 매번 새로운 이미지를 새로 고침). 여기

문제를 보여주는 사진 (: 일반 버튼, 우측 : 마우스 오버와 같은 버튼 왼쪽)입니다

Demo

내가 난, 두 경우에 동일한 이미지를 유지하고 싶습니다 이 작업을 수행하는 방법에 대해 약간의 손실이 있습니다.

public class MyButton : Button 
{ 

private static string Image_path = "ms-appx:///assets/Button.png"; 

     public MyButton() 
     { 

      ImageBrush brush = new ImageBrush() 
      { 
       ImageSource = new BitmapImage(new Uri(MyButton.Image_path)) 
      }; 
      this.Background = brush; 

      this.PointerEntered += a; 

     } 

     // This almost work, but the image is flickering when event is fired 
     private void a(object sender, PointerRoutedEventArgs e) 
     { 
      ImageBrush brush = new ImageBrush() 
      { 
       ImageSource = new BitmapImage(new Uri(MyButton.Image_path)) 
      }; 
      //this.Foreground = brush; 
      this.Background = brush; 
     } 
} 
+0

. 이 이상한 행동을 방지하려면 템플릿을 만들거나 ContentControl을 사용하여 콘텐츠를 이미지로 설정하거나 테두리를 배경 속성 인 – sTrenat

답변

0

끝에 나는 해결책을 발견 : 나는 내 프로젝트의 각 페이지에 버튼의 제 5 개 유형의 스타일을 추가했다. 이것은 버튼을 C# 클래스 (코드 숨김)에서 코드를 생성하기 위해 만들었고, 모든 스타일은 마우스 오버시 간단한 이미지 수정을 위해 500+ 코드 라인을 추가하기 때문에 정말 좋은 해결책은 아닙니다. ...

스타일의 종류 :

그냥 깜박임을 중지 일부 외부 분야에서 이러한 이미지를 저장하려면

'

<Style TargetType="local:MyButton"> 
     <!--<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
     <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
     <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" /> 
     <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />--> 
     <Setter Property="Padding" Value="8,4,8,4" /> 
     <!--<Setter Property="HorizontalAlignment" Value="Left" /> 
     <Setter Property="VerticalAlignment" Value="Center" /> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
     <Setter Property="FontWeight" Value="Normal" /> 
     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />--> 
     <Setter Property="UseSystemFocusVisuals" Value="True" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="local:MyButton"> 
        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter x:Name="ContentPresenter" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         Content="{TemplateBinding Content}" 
         ContentTransitions="{TemplateBinding ContentTransitions}" 
         ContentTemplate="{TemplateBinding ContentTemplate}" 
         Padding="{TemplateBinding Padding}" 
         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
         AutomationProperties.AccessibilityView="Raw"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

</Page.Resources>' 
0

우리는 우리가 TemplatePointerOverVisualState의를 편집 할 수 있습니다 Button의 기본 스타일을 복사 할 수 있습니다.

기본 스타일에서 VisualState에있는 Button의 BackgroundButtonBackgroundPointerOver 테마 리소스를 설정합니다. 따라서 Button의 스타일을 편집하지 않고 페이지 리소스에 ButtonBackgroundPointerOver을 정의 할 수 있습니다. 예를 들어

:

<Page.Resources> 
    <StaticResource x:Key="ButtonBackground" ResourceKey="MyMyImageBrush" /> 
    <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="MyMyImageBrush" /> 
    <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseMediumLowBrush" /> 
    <ImageBrush x:Key="MyMyImageBrush" ImageSource="ms-appx:///assets/Button.png" /> 
</Page.Resources> 
+0

Thx로 설정하면 짧은 시간에이 솔루션을 테스트 할 수 있습니다. 경우에, 뒤에 코드에서 이것을 할 방법이 있습니까? 내 단추는 XAML 요소가 아니라이 순간의 클래스입니다. –

+0

그것은이 순간에 얻은 가장 좋은 해결책이지만, 이것은 페이지의 모든 버튼을 수정합니다. 문제는 하나 이상의 버튼 유형을 가질 수 있다는 것입니다. 버튼의 종류에 따라 다른 배경 (예 : 다른 이미지)을 설정할 수 있어야합니다. 내 다른 버튼 클래스에서 코드 바로 뒤에 구현할 수있는 솔루션이 있다면 아주 멋질 것입니다. 고마워 –