I need a XAMComboEditor with an additional button that have same style of DropDown button. how can do it?
Hello,
1) this is because some of the margins and heights. I managed to get it to the desired look by changing MinHeight and MinWidth of the button and tweak the margins.
2) You can see as a reference the default generic theme in the DefaultStyles directory in the Infragistics folder. The theme is only for the Infragistics' controls and not for the default ones.
Alex.
i used following style:
<Style x:Key="NullableXamComboEditor" TargetType="{x:Type igEditors:XamComboEditor}"> <Setter Property="DropDownButtonStyle"> <Setter.Value> <Style TargetType="{x:Type ToggleButton}"> <Setter Property="MinWidth" Value="0" /> <Setter Property="MinHeight" Value="0" /> <Setter Property="Width" Value="Auto" /> <Setter Property="Height" Value="Auto" /> <Setter Property="Background" Value="Transparent" /> <Setter Property="Focusable" Value="False" /> <Setter Property="ClickMode" Value="Press" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Grid Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="16" SharedSizeGroup="ComboBoxButton" /> <ColumnDefinition Width="Auto" SharedSizeGroup="ComboBoxButton" /> </Grid.ColumnDefinitions> <Grid x:Name="ComboEditorDropdown" HorizontalAlignment="Right" Background="Transparent" Grid.Column="1" Width="15" Margin="0,1,1,1"> <Border SnapsToDevicePixels="True" x:Name="OuterBorder_Center" BorderBrush="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnNormalOuterBorderFillKey}}" BorderThickness="1" Background="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnNormalCenterFillKey}}" CornerRadius="2"/> <Border SnapsToDevicePixels="True" Margin="1,1,1,1" x:Name="InnerBorder" BorderBrush="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnNormalInnerBorderFillKey}}" BorderThickness="1" CornerRadius="2"/> </Grid> <Grid x:Name="glyphArrow" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Width="9" Height="6" Margin="0,0,1,0"> <Path HorizontalAlignment="Stretch" Width="6" RenderTransformOrigin="0,0" SnapsToDevicePixels="True" Fill="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnGlyphNormalForegroundFillKey}}" Stretch="Fill" Data="M4,0 L6,0 6,6 6,6 6,6 0,6 0,4 4,4 4,0 z" Height="6" Margin="0,-5,-6,0"> <Path.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="45"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Path.RenderTransform> </Path> </Grid> <Button x:Name="ClearBtn" Grid.Column="1" Content="C" Width="16" Background="Transparent" Foreground="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnGlyphNormalForegroundFillKey}}" Focusable="False" ClickMode="Press" Padding="1,1,1,1"> </Button> </Grid> <ControlTemplate.Triggers>
<Trigger SourceName="ClearBtn" Property="IsPressed" Value="True"> <Setter Property="igEditors:XamComboEditor.Value" Value="Null"/> </Trigger> <Trigger Property="Tag" Value="MouseOverControlTrue"> <Setter Property="BorderBrush" TargetName="InnerBorder" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnHottrackInnerBorderFillKey}}"/> <Setter Property="Background" TargetName="OuterBorder_Center" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnHottrackCenterFillKey}}"/> <Setter Property="BorderBrush" TargetName="OuterBorder_Center" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnHottrackOuterBorderFillKey}}"/> </Trigger>
<Trigger Property="IsChecked" Value="True"> <Setter Property="BorderBrush" TargetName="OuterBorder_Center" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnPressedOuterBorderFillKey}}"/> <Setter Property="Background" TargetName="OuterBorder_Center" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnPressedCenterFillKey}}"/> <Setter Property="BorderBrush" TargetName="InnerBorder" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnPressedInnerBorderFillKey}}"/> </Trigger>
<MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsChecked" Value="False"/> <Condition Property="IsMouseOver" Value="True"/> </MultiTrigger.Conditions> <Setter Property="BorderBrush" TargetName="InnerBorder" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnHottrackInnerBorderFillKey}}"/> <Setter Property="Background" TargetName="OuterBorder_Center" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnHottrackCenterFillKey}}"/> <Setter Property="BorderBrush" TargetName="OuterBorder_Center" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnHottrackOuterBorderFillKey}}"/> </MultiTrigger>
</ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Setter.Value> </Setter> </Style>
but:
1-when xamcomboeditor is in View mode. you can view only my button
and when xamcomboeditor is in Edit mode. you can view my button and dropdown button
2-i use Lipstick theme for all of controls in my application.
How can button'style to Lipstick?
why textbox inside XamComboEditor have white background when XamComboEditor have no focus?
If it is just a XamComboEditor and a button why don't you try
<StackPanel Orientation="Horizontal">
< ... XamComboEditor .... />
<Button x:Name="buttonClear">Clear</Button>
</StackPanel>
and wire the Click Event of the button to the XamComboEditor.Value=null.
If this is to be placed in a cell of the XamDataGrid then you have to create a style for the CellValuePresenter and place the code upper snippet in the Template.
Hope this helps,
I Want add a button near the DropDown button to empty XamComboEditor (XamComboEditor.Value=null)
If you want to add things to the display of the control then you would have to re-template the control. You can use the styles that we ship in the DefaultStyles directory as a starting point for the templates you create.