将图像插入按钮资源 [英] Insert image to button resource
本文介绍了将图像插入按钮资源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
我有一个按钮资源样式。我想添加位于我的主应用程序上的图像，我不知道该怎么做。
< Style x：Key = PaymentButton TargetType = {x：Type Button}>
< Setter Property = FocusVisualStyle值= {StaticResource ButtonFocusVisual} />
< Setter Property = 背景值= {DynamicResource {x：Static SystemColors.ControlBrushKey}} />
< Setter Property = 前景值= {DynamicResource {x：Static SystemColors.ControlTextBrushKey}} />
< Setter Property = BorderThickness值= 0 />
< Setter Property = HorizontalContentAlignment Value = 中心 />
< Setter Property = VerticalContentAlignment值= 中心 />
< Setter Property = 填充值= 0,0,1,1 />
< Setter Property = 模板>
< Setter.Value>
< ControlTemplate TargetType = {x：Type Button}>
< ControlTemplate.Resources>
< Storyboard x：Key = ShowShine>
< DoubleAnimationUsingKeyFrames BeginTime = 00:00:00 Storyboard.TargetName = Shine Storyboard.TargetProperty = （UIElement.Opacity）>
< SplineDoubleKeyFrame KeyTime = 00：00：00.5000000值= 1 />
< / DoubleAnimationUsingKeyFrames >
< / 故事板 >
< Storyboard x：Key = HideShine>
< DoubleAnimationUsingKeyFrames BeginTime = 00:00:00 Storyboard.TargetName = Shine Storyboard.TargetProperty = （UIElement.Opacity）>
< SplineDoubleKeyFrame KeyTime = 00：00：00.3000000值= 0 />
< / DoubleAnimationUsingKeyFrames >
< / 故事板 >
< / ControlTemplate.Resources >
< Border CornerRadius = 0 BorderThickness = 0 RenderTransformOrigin = 0.5,0.5 x：Name = border BorderBrush = AliceBlue>
< Border.RenderTransform>
< TransformGroup>
< ScaleTransform ScaleX = 1 ScaleY = 1 />
< SkewTransform AngleX = 0 AngleY = 0 />
< RotateTransform Angle = 0 />
< TranslateTransform X = 0 Y = 0 />
< / TransformGroup >
< / Border.RenderTransform >
< Border removed = {TemplateBinding Background} CornerRadius = 0 x：名称= border1 BorderThickness = 0 >
< Grid>
< Grid.RowDefinitions>
< RowDefinition Height = 1 * />
< RowDefinition Height = 1 * />
< / Grid.RowDefinitions >
< Border Grid.Row = 1 Opacity = 0 x：Name = Shine宽度= 自动高度= < span class =code-string> Auto CornerRadius = 0 Margin = 1,0，-1,0 removed = {TemplateBinding BorderBrush} />
< ContentPresenter VerticalAlignment = 中心 Grid.RowSpan = 2 HorizontalAlignment = 中心 x：名称= contentPresenter />
< / 网格 >
< / Border >
< / 边框 >
< ControlTemplate.Triggers>
< Trigger Property = IsEnabled值= 错误>
< Setter Property = 不透明度 TargetName = border1值= 0.5\" />
< Setter Property = 不透明度 TargetName = border值= 1\" />
< Setter Property = 不透明度 TargetName = contentPresenter值= 0.5\" />
< / 触发器 >
< Trigger Property = IsPressed Value = True>
< Setter Property = RenderTransform TargetName = border>
< Setter.Value>
< TransformGroup>
< ScaleTransform ScaleX = 0.95 ScaleY = 0.95 />
< SkewTransform AngleX = 0 AngleY = 0 />
< RotateTransform Angle = 0 />
< TranslateTransform X = 0 Y = 0 />
< / TransformGroup >
< / Setter.Value >
< / Setter >
< / 触发器 >
<！ - < Trigger Property = IsMouseOver 值= True>
< Trigger.ExitActions>
< BeginStoryboard Storyboard = {StaticResource HideShine} x：Name = HideShine_BeginStoryboard />
< / Trigger.ExitActions >
< Trigger.EnterActions>
< BeginStoryboard x：Name = ShowShine_BeginStoryboard Storyboard = {StaticResource ShowShine} />
< / Trigger.EnterActions >
< / 触发器 > - >
< / ControlTemplate.Triggers >
< / ControlTemplate >
< / Setter.Value >
< / Setter >
< Setter Property = FontSize Value = 18> < / Setter >
< Setter Property = FontFa mily值= Segoe UI />
< Setter Property = 前景值= 黑色> < / Setter >
< Setter Property = VerticalContentAlignment值= 中心> < / Setter >
< Setter Property = HorizontalContentAlignment值= 中心> < / Setter >
< / 风格 >
如何将代码放在按钮上？解决方案中的我的图像文件夹位于EPSApp \ images = div class =h2_lin>解决方案
检查这是否解决了您的问题。我不知道我的问题是否正确!!!
< 按钮 x：名称 = < span class =code-keyword> btnClose 样式 = {StaticResource imgButtonStyle} 保证金 = 3,0,0,0 HorizontalAlignment = 中心 VerticalAlignment = 中心 HorizontalContentAlignment = 中心 VerticalContentAlignment = 中心 宽度 = 24 高度 = 24 点击 = CloseSettings >
< 图片 < span class =code-attribute> x：名称 = imgClose 来源 = / AppName; component / ImageFolder / settingsgear24.png / >
< /按钮 >
和imgButtonStyle：
< style x：key = imgButtonStyle targettype = {x ：类型按钮} xmlns：x = ＃unknown >
< setter property = 填充 < span class =code-attribute> value = 3 / >
< setter property = BorderBrush value = < span class =code-keyword>＃4a4e56 / >
< setter property = BorderThickness value = 1 / >
< setter property = 模板 >
< setter.value >
< span class =code-keyword>< controltemplate targettype = {x：Type Button} >
< grid minheight = 16 < span class =code-attribute> minwidth = 16 >
< visualstatemanager.visualstategroups >
< < span class =code-leadattribute> visualstategroup x：name = CommonStates >
< visualstate x：name = 正常 / >
< visualstate < span class =code-attribute> x：name = MouseOver >
< storyboard < span class =code-keyword>>
< doubleanimation duration = 0：0：0.20 s toryboard.targetname = MouseoverAnimation storyboard.targetproperty = 不透明度 = 1 / >
< / storyboard >
< / visualstate >
< visualstate x：name = 按下 / >
< visualstate x：name = 已停用 >
< storyboard >
< doubleanimation 持续时间 = 0 storyboard.targetname = DisabledVisualElement storyboard.targetproperty = 不透明度 = 。35 / >
< / storyboard >
< / visualstate >
< / visualstategroup >
< / visualstatemanager.visualstategroups >
< border x：name = MouseoverAnimation opacity = 0 borderbrush = {TemplateBinding BorderBrush} borderthickness = {TemplateBinding BorderThickness} / >
< contentpresenter / >
< rectangle < span class =code-attribute> x：name = DisabledVisualElement fill = ＃eff0f1 不透明度 = 0 ishittestvisible = false / >
< / grid >
< / controltemplate >
< / setter.value >
< / setter >
< span class =code-keyword>< / style >
Hi all,
I have a button resource style. I want to add image which located on the my main application and I don't know how to do it.
<Style x:Key="PaymentButton" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0,0,1,1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="ShowShine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HideShine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border CornerRadius="0" BorderThickness="0" RenderTransformOrigin="0.5,0.5" x:Name="border" BorderBrush="AliceBlue">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Border.RenderTransform>
<Border removed="{TemplateBinding Background}" CornerRadius="0" x:Name="border1" BorderThickness="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Opacity="0" x:Name="Shine" Width="Auto" Height="Auto" CornerRadius="0" Margin="1,0,-1,0" removed="{TemplateBinding BorderBrush}"/>
<ContentPresenter VerticalAlignment="Center" Grid.RowSpan="2" HorizontalAlignment="Center" x:Name="contentPresenter"/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="border1" Value="0.5"/>
<Setter Property="Opacity" TargetName="border" Value="1"/>
<Setter Property="Opacity" TargetName="contentPresenter" Value="0.5"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="RenderTransform" TargetName="border">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="0.95" ScaleY="0.95"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
<!--<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HideShine}" x:Name="HideShine_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="ShowShine_BeginStoryboard" Storyboard="{StaticResource ShowShine}"/>
</Trigger.EnterActions>
</Trigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="18"></Setter>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="Foreground" Value="Black"></Setter>
<Setter Property="VerticalContentAlignment" Value="Center"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
</Style>
How is the code to place image on the button? My image folder on solution is at EPSApp\images
解决方案
Check if this solves your problem .I dont know if i got your question correct !!!
<Button x:Name="btnClose" Style="{StaticResource imgButtonStyle}" Margin="3,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="24" Height="24" Click="CloseSettings"> <Image x:Name="imgClose"Source="/AppName;component/ImageFolder/settingsgear24.png"/> </Button>
and the imgButtonStyle :
<style x:key="imgButtonStyle" targettype="{x:Type Button}" xmlns:x="#unknown"> <setter property="Padding" value="3" /> <setter property="BorderBrush" value="#4a4e56" /> <setter property="BorderThickness" value="1" /> <setter property="Template"> <setter.value> <controltemplate targettype="{x:Type Button}"> <grid minheight="16" minwidth="16"> <visualstatemanager.visualstategroups> <visualstategroup x:name="CommonStates"> <visualstate x:name="Normal" /> <visualstate x:name="MouseOver"> <storyboard> <doubleanimation duration="0:0:0.20" storyboard.targetname="MouseoverAnimation" storyboard.targetproperty="Opacity" to="1" /> </storyboard> </visualstate> <visualstate x:name="Pressed" /> <visualstate x:name="Disabled"> <storyboard> <doubleanimation duration="0" storyboard.targetname="DisabledVisualElement" storyboard.targetproperty="Opacity" to=".35" /> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <border x:name="MouseoverAnimation" opacity="0" borderbrush="{TemplateBinding BorderBrush}" borderthickness="{TemplateBinding BorderThickness}" /> <contentpresenter /> <rectangle x:name="DisabledVisualElement" fill="#eff0f1" opacity="0" ishittestvisible="false" /> </grid> </controltemplate> </setter.value> </setter> </style>
这篇关于将图像插入按钮资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
