none
UWP 버튼 이미지 질문 RRS feed

  • 질문

  • UWP환경에서 개발중입니다.

    버튼 백그라운드 이미지를 png파일로 해서 실행시키면 이미지는 정상출력되나 마우스를 버튼 위로 올릴 시 이미지가 덮혀집니다.

    마우스 버튼 위로 올릴때 버튼위에 올렸다는 테두리(?)나 효과는 그대로 있되 원래 이미지를 그대로 출력하고싶습니다. 

    제 xmal 소스코드입니다.

                        <Button HorizontalAlignment="Center" Width="150" Height="156" Margin="0">
                            <Button.Background>
                                <ImageBrush Stretch="Uniform" ImageSource="Assets/010-learning.png"/>
                            </Button.Background>
                        </Button>

    2017년 3월 30일 목요일 오후 12:06

모든 응답

  • XAML 파일에서 Page의 Resource에 스타일을 추가해보시기 바랍니다.

    버튼의 PointOver 이벤트 시에 적용할 VisualState를 정의한 후, 그 스타일을 해당 버튼에서 지정하는 것입니다.

    대략적으로 여기에 맞을만한 코드를 MainPage.xaml에 넣어보자면 다음과 같습니다.

    굵게 표시한 부분을 주목해주세요.

    <Page
        x:Class="ButtonSample.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ButtonSample"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
            <Style x:Key="ButtonStyle1" TargetType="Button">
                <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="Button">
                            <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.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Button Style="{StaticResource ButtonStyle1}" HorizontalAlignment="Center" Width="150" Height="156" Margin="0">
                <Button.Background>
                    <ImageBrush Stretch="Uniform" ImageSource="Assets/010-learning.png"/>
                </Button.Background>
            </Button>
    
        </Grid>
    </Page>

    2017년 4월 10일 월요일 오전 11:45