样式与图像作为参数

Question

我想知道如何在样式中参数化图像源，并且该样式在另一个样式中使用。让我说得更清楚些。我为按钮定义了一个样式，样式有一个图像。那我有另一种风格了。在那个样式上，我有两个按钮(我已经应用了按钮样式)，我希望能够改变每个按钮的图像。但是我不能让它工作。

代码的第一部分定义了按钮的样式，其思想是根据需要更改图像以表示操作。

这是我的代码:

<Style x:Key="InnerInscribirseButtonMatch" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="MouseOver">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Blur_back">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-0.666"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Blur_back">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.705"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="contentPresenter">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2.665"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="contentPresenter">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2.999"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Blur_back">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFE9E9A7"/>
                                <EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FFF1F0DD"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="3"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="image">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="4"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Back">
                                <EasingColorKeyFrame KeyTime="0" Value="#FF356AA0"/>
                                <EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FF1264B6"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Grid>
                        <Rectangle x:Name="Blur_back" RadiusY="5" RadiusX="5" Stroke="#FF3F4C6B" StrokeThickness="2" Fill="#FF5B8BBC" Margin="-4.5,-4" Opacity="0" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Rectangle.RenderTransform>
                            <Rectangle.Effect>
                                <BlurEffect Radius="7"/>
                            </Rectangle.Effect>
                        </Rectangle>
                        <Rectangle x:Name="Back" RadiusY="5" RadiusX="5" Stroke="#FF3F4C6B" StrokeThickness="2" Fill="#FF356AA0"/>
                        <Rectangle x:Name="Glass" RadiusY="5" RadiusX="5" Stroke="#FF3F4C6B" StrokeThickness="2" Fill="White" Height="Auto" VerticalAlignment="Stretch" Opacity="0.15" Margin="0,0,0,61" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" RecognizesAccessKey="True" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" Margin="13.766,0,15.766,14.351" d:LayoutOverrides="Width">
                            <ContentPresenter.Effect>
                                <DropShadowEffect Opacity="0.77"/>
                            </ContentPresenter.Effect>
                            <ContentPresenter.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                        <Image x:Name="image" Margin="12,3.5,17,22.5" RenderTransformOrigin="0.5,0.5" Width="64" Height="64" Source="apuntarlista.png">
                            <Image.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Image.RenderTransform>
                        </Image>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Mouse.MouseDown">
                            <BeginStoryboard x:Name="MouseOver_BeginStoryboard" Storyboard="{StaticResource MouseOver}"/>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Mouse.MouseUp">
                            <StopStoryboard BeginStoryboardName="MouseOver_BeginStoryboard"/>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Mouse.MouseLeave">
                            <StopStoryboard BeginStoryboardName="MouseOver_BeginStoryboard"/>
                        </EventTrigger>
                        <Trigger Property="IsCancel" Value="False"/>
                        <Trigger Property="IsFocused" Value="True"/>
                        <Trigger Property="IsDefaulted" Value="True"/>
                        <Trigger Property="IsMouseOver" Value="True"/>
                        <Trigger Property="IsPressed" Value="True"/>
                        <Trigger Property="IsEnabled" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

嗯，这是我想定制的部分。来源部分: source ="apuntarlist .png"

<Image x:Name="image" Margin="12,3.5,17,22.5" RenderTransformOrigin="0.5,0.5" Width="64" Height="64" Source="apuntarlista.png">
                            <Image.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Image.RenderTransform>
                        </Image>

这里是第二个样式

<Style x:Key="ButtonStyleCambiable" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Height="130" Width="Auto" Margin="50,0,-315,0">
                        <Rectangle x:Name="background" Fill="{Binding BackgroundColor, FallbackValue=#FF932424}" RadiusY="15" RadiusX="15" Stroke="{Binding BorderBackgroundColor, FallbackValue=#FF954444}" StrokeThickness="3" Height="130" Width="375" Margin="0" HorizontalAlignment="Left" d:LayoutOverrides="HorizontalAlignment"/>
                        <Rectangle x:Name="white_glass" Fill="White" RadiusY="15" RadiusX="15" Stroke="{x:Null}" StrokeThickness="3" Opacity="0.07" Height="65" VerticalAlignment="Top" Width="375" Margin="0" HorizontalAlignment="Left" ClipToBounds="True" d:LayoutOverrides="HorizontalAlignment"/>
                        <TextBlock HorizontalAlignment="Left" Margin="13,13.901,0,0" TextWrapping="Wrap" Width="272" VerticalAlignment="Center" FontSize="48" FontFamily="Cambria" Foreground="White" Text="{Binding Description, FallbackValue=50/100}" FontWeight="Bold">
                            <TextBlock.Effect>
                                <DropShadowEffect ShadowDepth="3" Opacity="0.35" BlurRadius="13"/>
                            </TextBlock.Effect></TextBlock>
                        <TextBlock HorizontalAlignment="Left" Margin="206,14.192,0,0" TextWrapping="Wrap" Width="122" VerticalAlignment="Top" FontSize="24" FontFamily="Cambria" Foreground="White" FontWeight="Bold" Text="En espera: " d:LayoutOverrides="HorizontalAlignment">
                            <TextBlock.Effect>
                                <DropShadowEffect ShadowDepth="3" Opacity="0.35" BlurRadius="13"/>
                            </TextBlock.Effect></TextBlock>
                        <TextBlock HorizontalAlignment="Left" Margin="210,50.123,0,51.739" TextWrapping="Wrap" Width="109" VerticalAlignment="Stretch" FontSize="24" FontFamily="Cambria" Foreground="White" FontWeight="Bold" Text="Libres: " d:LayoutOverrides="HorizontalAlignment, Height">
                            <TextBlock.Effect>
                                <DropShadowEffect ShadowDepth="3" Opacity="0.35" BlurRadius="13"/>
                            </TextBlock.Effect></TextBlock>
                        <TextBlock HorizontalAlignment="Left" Margin="292,51.123,0,50.739" TextWrapping="Wrap" Width="130" VerticalAlignment="Stretch" FontSize="24" FontFamily="Cambria" Foreground="White" FontWeight="Bold" Text="{Binding FreeSits, FallbackValue=10}" d:LayoutOverrides="HorizontalAlignment, Height">
                            <TextBlock.Effect>
                                <DropShadowEffect ShadowDepth="3" Opacity="0.35" BlurRadius="13"/>
                            </TextBlock.Effect></TextBlock>
                        <TextBlock HorizontalAlignment="Left" Margin="329,15.192,0,0" TextWrapping="Wrap" Width="96" VerticalAlignment="Top" FontSize="24" FontFamily="Cambria" Foreground="White" FontWeight="Bold" Text="{Binding PeopleWaiting, FallbackValue=1}" d:LayoutOverrides="HorizontalAlignment">
                            <TextBlock.Effect>
                                <DropShadowEffect ShadowDepth="3" Opacity="0.35" BlurRadius="13"/>
                            </TextBlock.Effect></TextBlock>
                        <Button Content="Inscribir" HorizontalAlignment="Left" Margin="381,2,0,2" Style="{DynamicResource InnerInscribirseButtonMatch}" Width="129" FontFamily="Calibri" FontSize="24" Foreground="White" Height="Auto" VerticalAlignment="Stretch" Opacity="0.85"/>
                        <Button Content="Info" HorizontalAlignment="Left" Margin="518,2,0,2" Style="{DynamicResource InnerInscribirseButtonMatch}" Width="129" FontFamily="Calibri" FontSize="24" Foreground="White" Height="Auto" VerticalAlignment="Stretch" Opacity="0.85"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True"/>
                        <Trigger Property="IsDefaulted" Value="True"/>
                        <Trigger Property="IsMouseOver" Value="True"/>
                        <Trigger Property="IsPressed" Value="True"/>
                        <Trigger Property="IsEnabled" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我有:

<Button Content="Inscribir" HorizontalAlignment="Left" Margin="381,2,0,2" Style="{DynamicResource InnerInscribirseButtonMatch}" Width="129" FontFamily="Calibri" FontSize="24" Foreground="White" Height="Auto" VerticalAlignment="Stretch" Opacity="0.85"/>
<Button Content="Info" HorizontalAlignment="Left" Margin="518,2,0,2" Style="{DynamicResource InnerInscribirseButtonMatch}" Width="129" FontFamily="Calibri" FontSize="24" Foreground="White" Height="Auto" VerticalAlignment="Stretch" Opacity="0.85"/>

你可以看到两个按钮都使用Style="{DynamicResource InnerInscribirseButtonMatch}"

但是我希望每一个都有一个不同的图像

我该怎么做呢?我希望能说清楚。

Answer 1

我认为您可以定义Button.DataContext属性，例如，通过字符串，并将Image.Source属性与控件DataContext绑定。

<Button DataContext="apuntarlista.png"
        Style="{DynamicResource InnerInscribirseButtonMatch}"
         />
<Button DataContext="apuntarlista2.png"
        Style="{DynamicResource InnerInscribirseButtonMatch}"
         />

和在你的内心风格:

<Image x:Name="image" 
       RenderTransformOrigin="0.5,0.5" 
       Width="64" Height="64" Source="{Binding}">
                        <Image.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Image.RenderTransform>
                    </Image>

Answer 2

恕我直言，我总是尽量不改变样式，因为它需要特定的输入。这就是Content和ContentTemplate的作用。当然，有时候这很难做到。

对于这些情况，我们使用AttachedProperty 因此，创建一个新的静态类名称，例如ButtonIconService。给它一个名为Icon的附加属性

设置在你的按钮上，比如

<Button ButtonIconService.Icon="pathToIcon.png"
<Button ButtonIconService.Icon="pathToOtherIcon.png"

并将其绑定到模板中的图像。

<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(ButtonInfoService.Icon)}}"

我不确定的时刻，如果括号周围的ButtonInfoService.Icon是需要的?

希望对你有帮助。