1. 技术文章
  2. Dynamic PAth Icon Buttons in a Collection ItemTemplate Resource w/ MouseOver

Dynamic PAth Icon Buttons in a Collection ItemTemplate Resource w/ MouseOver

由 六眼飞鱼酱① 提交于 2019-11-29 07:33:25

Ok, so after you updated your question and we figured out that your culprit was the usage of MenuItem and it's inherited control template giving the #ddd gray color on highlight we talked about some quick refactoring for better practices. So here's an example of what I was talking about (that you'll probably want to tweak a little to fit your needs) and assumes that your "ImageAddress" is just pointed at Geometry path data to create your icons.

However if that's not the case, and you're literally using images that's fine too, just swap the Path object in the button template with Image or whatever you want to do. So anyway here's what I do with a quick example starting with the resources you'd plop in a Resource dict or wherever;

<Window.Resources>
        <!-- The "icons" -->
        <Geometry x:Key="ExampleIcon">M78,63 L69.333333,75 54.00093,76.333333 67.333747,89.000655 64.667184,101.66764 78.666641,93.667175 89.332417,102.33399 90.66603,89.667334 103.33171,77.00035 86.666127,75.666984 z</Geometry>
        <Geometry x:Key="ExampleIcon2">M72,62 L48,83 69,106 92,87 z</Geometry>

        <!-- The Button Template -->
        <Style x:Key="NeatoButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="4,2"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">                      

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>

                                <Border Grid.RowSpan="2"
                                        x:Name="border" 
                                        BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}" 
                                        Background="{TemplateBinding Background}" 
                                        SnapsToDevicePixels="true"/>

                                <Path Stretch="Uniform"
                                      Data="{TemplateBinding Tag}"
                                      Fill="#FF5DBEBE"
                                      Margin="{TemplateBinding Padding}"/>

                                <ContentPresenter Grid.Row="1"
                                                  x:Name="contentPresenter" 
                                                  Focusable="False"                                               
                                                  Margin="{TemplateBinding Padding}" 
                                                  RecognizesAccessKey="True" 
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                            </Grid>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="border" 
                                        Value="White"/>
                                <Setter Property="BorderBrush" TargetName="border" 
                                        Value="DarkOrange"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" 
                                        Value="Black"/>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>

So you'll notice I took everything you had separated out and it now all lives in one template you can use from anywhere. There's also a couple example (albeit shotty quick little drawings lol) icon example path data in there at the top. So say we have buttons we need to make now. Well you just invoke what icon you want via the handy dandy Tag property at the instance like;

<StackPanel Orientation="Horizontal" 
    HorizontalAlignment="Center" VerticalAlignment="Center">

        <Button Content="Blah Blah"
                Style="{StaticResource NeatoButtonStyle}"
                Tag="{StaticResource ExampleIcon}"/>

        <Button Content="Blah Blah"
                Style="{StaticResource NeatoButtonStyle}"
                Tag="{StaticResource ExampleIcon2}"/>

</StackPanel>

Which allows a quick, easy, and manageable way to store your icons, use them as needed etc. I'd recommend setting a default for Tag in the template via a setter like; <Setter Property="Tag" Value="{StaticResource DefaultIconResourceName}"/> just so if someone forgets to set one, you have one there.

So now we have our button setup, but how do you use it in your instance of creating them via collection? Well we just swap your current ItemTemplate with something like;

<ItemsControl.ItemTemplate>
   <DataTemplate>

      <Button Content="{Binding Description}"                 
              Tag="{Binding ImageAddress}"
              Style="{StaticResource NeatoButtonStyle}"/>

   </DataTemplate>
</ItemsControl.ItemTemplate>

Which, in doing so eliminates a bunch of unnecessary clutter, as well as removes all those unnecessary DOM elements created for each instance by using the other nested templated controls.

That's it, you're done. Now if say you use the buttons all over the place and someone decides something needs tweaked, you do it in one spot and it gets inherited to every instance. As well as allowing some more flexibility for one-off scenarios where you maybe need to change other stuff easily.

Anyway hope this helps. Cheers!

ADDENDUM

If you wanted to add something like say a "Hover State" to the path you would just add a name to your Path inside the button template like;

<Path x:Name="ButtonIcon"
      Stretch="Uniform"
      Data="{TemplateBinding Tag}"
      Fill="#FF5DBEBE"
      Margin="{TemplateBinding Padding}"/>

Then just add a trigger for it to the existing IsMouseOver ones already sitting in the button template like for example;

<Setter Property="Fill" 
        TargetName="ButtonIcon" 
        Value="Red"/>

ADDENDUM TO THE ADDENDUM:

So to add a Disabled State we just add another trigger to handle it for us and give the visual of being disabled. So we would add another trigger like this into template right where we're handling IsMouseOver already.

<Trigger Property="IsEnabled" Value="false">
   <Setter TargetName="border" 
           Property="Background" 
           Value="{StaticResource DisabledBackgroundBrush}" />
   <Setter TargetName="border" 
           Property="BorderBrush" 
           Value="{StaticResource DisabledBorderBrush}" />
   <Setter Property="Foreground" 
           Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>

So now when IsEnabled=False our Border and our foreground reflect that state by using the default Disabled brushes while in that state.

Keep in mind it's still a Button control and comes with all the built in functionality of any standard default button. We just didn't cover all the bases for the sake of this example.

So if you need IsEnabled, IsKeyboardFocused, IsPressed etc, you can just add whatever you need in there form.

标签
wpf
xaml
visual-studio-2015
app.xaml
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!