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 =“apuntarlista.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

的Attached Property

在按钮上设置

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

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

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

我不确定是否需要ButtonInfoService.Icon周围的括号？

希望有所帮助。

样式与图像作为参数

2 个答案: