Quantcast
Channel: Extended WPF Toolkit™ Community Edition
Viewing all articles
Browse latest Browse all 4964

New Post: Template SplitButton

$
0
0
Hi,

Ok, let's try something else.
Keep the ButtonChromes in the Template, but remove the "RenderMouseOver", "RenderPressed" and "RenderChecked" properties. You can then set the Background colors with the triggers :
<ControlTemplate TargetType="{x:Type xctk:SplitButton}">
                  <Grid x:Name="MainGrid"
                        SnapsToDevicePixels="True">
                     <chrome:ButtonChrome x:Name="ControlChrome"
                                          Background="{TemplateBinding Background}"
                                          RenderEnabled="{TemplateBinding IsEnabled}">
                        <Grid>
                           <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="*" />
                              <ColumnDefinition Width="Auto" />
                           </Grid.ColumnDefinitions>
                           <Button x:Name="PART_ActionButton"
                                   Margin="0"
                                   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                   VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                   Padding="{TemplateBinding Padding}">
                              <Button.Template>
                                 <ControlTemplate TargetType="Button">
                                    <ContentPresenter />
                                 </ControlTemplate>
                              </Button.Template>
                              <Grid>
                                 <chrome:ButtonChrome x:Name="ActionButtonChrome"
                                                      Background="{TemplateBinding Background}"
                                                      Foreground="{TemplateBinding Foreground}"
                                                      BorderThickness="1,1,0,1"
                                                      BorderBrush="{TemplateBinding BorderBrush}"
                                                      RenderEnabled="{TemplateBinding IsEnabled}">
                                    <ContentPresenter Name="ActionButtonContent"
                                                      Margin="{TemplateBinding Padding}"
                                                      Content="{TemplateBinding Content}"
                                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                      RecognizesAccessKey="true" />
                                 </chrome:ButtonChrome>
                              </Grid>
                           </Button>
                           <ToggleButton x:Name="PART_ToggleButton"
                                         Grid.Column="1"
                                         IsTabStop="False"
                                         IsChecked="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                         IsHitTestVisible="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolConverter}}">
                              <ToggleButton.Template>
                                 <ControlTemplate TargetType="ToggleButton">
                                    <ContentPresenter />
                                 </ControlTemplate>
                              </ToggleButton.Template>
                              <Grid>
                                 <chrome:ButtonChrome x:Name="ToggleButtonChrome"
                                                      Background="{TemplateBinding Background}"
                                                      BorderBrush="{TemplateBinding BorderBrush}"
                                                      Padding="1,0,1,0"
                                                      RenderEnabled="{TemplateBinding IsEnabled}">
                                    <Grid x:Name="arrowGlyph"
                                          IsHitTestVisible="False"
                                          Margin="4,3,4,3">
                                       <Path x:Name="Arrow"
                                             Width="7"
                                             Height="4"
                                             Data="M 0,1 C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 z"
                                             Fill="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                                    </Grid>
                                 </chrome:ButtonChrome>
                              </Grid>
                           </ToggleButton>
                        </Grid>
                     </chrome:ButtonChrome>

                     <Popup x:Name="PART_Popup"
                            HorizontalOffset="1"
                            VerticalOffset="1"
                            AllowsTransparency="True"
                            StaysOpen="False"
                            Placement="Bottom"
                            Focusable="False"
                            IsOpen="{Binding IsChecked, ElementName=PART_ToggleButton}">
                        <!-- TODO: Create Popup Styles that can be reused on all popups in the toolkit-->
                       <Border BorderThickness="1" Background="{StaticResource PopupBackgroundBrush}" BorderBrush="{StaticResource ColorPickerDarkBorderBrush}">
                                    <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding DropDownContent}" />
                        </Border>
                     </Popup>

                  </Grid>
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsEnabled"
                              Value="False">
                        <Setter Property="Fill"
                                TargetName="Arrow"
                                Value="#AFAFAF" />
                     </Trigger>
                     <Trigger SourceName="PART_ActionButton"
                              Property="IsMouseOver"
                              Value="True">
                        <Setter TargetName="ActionButtonChrome"
                                Property="Background"
                                Value="Green" />
                     </Trigger>
                     <Trigger SourceName="PART_ActionButton"
                              Property="IsPressed"
                              Value="True">
                        <Setter TargetName="ActionButtonChrome"
                                Property="Background"
                                Value="Blue" />
                     </Trigger>
                     <Trigger SourceName="PART_ToggleButton"
                              Property="IsMouseOver"
                              Value="True">
                        <Setter TargetName="ToggleButtonChrome"
                                Property="Background"
                                Value="Red" />
                     </Trigger>
                     <Trigger SourceName="PART_ToggleButton"
                              Property="IsPressed"
                              Value="True">
                        <Setter TargetName="ToggleButtonChrome"
                                Property="Background"
                                Value="Blue" />
                        <Setter TargetName="Arrow"
                                Property="Fill"
                                Value="Green" />
                     </Trigger>
                     <Trigger SourceName="PART_ToggleButton"
                              Property="IsChecked"
                              Value="True">
                        <Setter TargetName="ToggleButtonChrome"
                                Property="Background"
                                Value="Yellow" />
                        <Setter TargetName="Arrow"
                                Property="Fill"
                                Value="Green" />
                     </Trigger>
                  </ControlTemplate.Triggers>
</ControlTemplate>

Viewing all articles
Browse latest Browse all 4964

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>