Hi,
I am using the code given at a post
http://ko.infragistics.com/community/forums/t/64661.aspx
in addition to this i am using this style sheet resource
which is as below, for this sheet i am able to achieve Select all, but the problem is If the dropdown is having only one item, then it doesn't show up, it only shows Select all.Please help
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:igEditors="http://schemas.infragistics.com/xaml" xmlns:ig="http://schemas.infragistics.com/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:common="clr-namespace:Room.Functional.EAPolicy.CommonClass" xmlns:igPrim="http://schemas.infragistics.com/xaml/primitives">
<common:CheckAllCommand x:Key="CheckAllCommand"/> <common:ArrayConverter x:Key="converter"/> <common:CheckBoxIsCheckedConverter x:Key="CheckBoxIsCheckedConverter"/> <LinearGradientBrush x:Key="SilverlightDarkBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush> <SolidColorBrush x:Key="SilverlightBackgroundBrush" Color="#FF1F3B53"/>
<Style x:Key="toggleButtonStyle" TargetType="ToggleButton"> <Setter Property="Foreground" Value="#FF333333"/> <Setter Property="BorderBrush" Value="{StaticResource SilverlightDarkBrush}"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Padding" Value="2"/> <Setter Property="Cursor" Value="Hand"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ToggleButton"> <Grid>
<Grid> <Border x:Name="Background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/> <Border x:Name="BackgroundOverlay" Background="#FF448DCA" BorderBrush="#FF448DCA" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Opacity="0"/> <Border x:Name="BackgroundOverlay2" Background="#FF448DCA" BorderBrush="#00000000" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="0"/> <Border x:Name="BackgroundGradient" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1" Margin="{TemplateBinding BorderThickness}"> <Border.Background> <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0"> <GradientStop Color="#FFFFFFFF" Offset="0"/> <GradientStop Color="#F9FFFFFF" Offset="0.375"/> <GradientStop Color="#E5FFFFFF" Offset="0.625"/> <GradientStop Color="#C6FFFFFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border x:Name="BackgroundOverlay3" Background="#FF448DCA" BorderBrush="#00000000" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="0"/> <Border x:Name="BackgroundGradient2" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,1,1,0" Margin="{TemplateBinding BorderThickness}" Opacity="0"> <Border.Background> <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0"> <GradientStop Color="#FFFFFFFF" Offset="0"/> <GradientStop Color="#F9FFFFFF" Offset="0.375"/> <GradientStop Color="#E5FFFFFF" Offset="0.625"/> <GradientStop Color="#C6FFFFFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border x:Name="Highlight" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Margin="{TemplateBinding BorderThickness}" IsHitTestVisible="false" Opacity="0"/> <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> <Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="1" CornerRadius="1" Margin="1" IsHitTestVisible="false" Visibility="Collapsed"/> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="ig:ComboEditorItemControl"> <Setter Property="Margin" Value="20,0,0,0"/> </Style> <Style TargetType="ig:XamComboEditor"> <Setter Property="Padding" Value="4,2"/> <Setter Property="MinHeight" Value="22"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Background" Value="{StaticResource SilverlightBackgroundBrush}"/> <Setter Property="BorderBrush" Value="{StaticResource SilverlightDarkBrush}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ig:XamComboEditor"> <Grid > <VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DropDownStates"> <VisualState x:Name="Closed"/> <VisualState x:Name="Open"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Popup" Storyboard.TargetProperty="IsOpen"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <System:Boolean>True</System:Boolean> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups>
<Border x:Name="ContentPresenterBorder"> <Grid x:Name="gridLayout" ShowGridLines="False" > <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="17" /> </Grid.ColumnDefinitions>
<Popup x:Name="Popup" VerticalAlignment="Bottom" IsOpen="False" Grid.ColumnSpan="2" >
<Border x:Name="RootPopupElement" Height="Auto" MaxHeight="{TemplateBinding MaxDropDownHeight}" HorizontalAlignment="Stretch" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" > <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFFFFFFF" Offset="0"/> <GradientStop Color="#FFFEFEFE" Offset="1"/> </LinearGradientBrush> </Border.Background>
<Grid> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<CheckBox Grid.Row="0" Command="{StaticResource CheckAllCommand}" Content="Select All"> <CheckBox.CommandParameter> <MultiBinding Converter="{StaticResource converter}"> <Binding RelativeSource="{RelativeSource AncestorType=igEditors:XamComboEditor}"/> <Binding RelativeSource="{RelativeSource Self}" Path="IsChecked"/> </MultiBinding> </CheckBox.CommandParameter>
<CheckBox.IsChecked> <MultiBinding Converter="{StaticResource CheckBoxIsCheckedConverter}"> <Binding RelativeSource="{RelativeSource AncestorType=igEditors:XamComboEditor}" Mode="OneWay"/> <Binding RelativeSource="{RelativeSource AncestorType=igEditors:XamComboEditor}" Path="SelectedItems.Count" Mode="OneWay"/> </MultiBinding> </CheckBox.IsChecked>
</CheckBox>
<igPrim:ItemsPanel Grid.Row="1" x:Name="ItemsPanel" /> <ScrollBar x:Name="VerticalScrollBar" Width="20" Grid.Row="1" Grid.Column="1"/> <ScrollBar x:Name="HorizontalScrollBar" Height="20" Grid.Row="2" Grid.Column="0"/> </Grid> </Border>
</Popup>
<Border x:Name="borderEditMode" Background="#FFFFFFFF" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Visibility="Collapsed" CornerRadius="2"/>
<ToggleButton Grid.Row="1" x:Name="ToggleButton" HorizontalAlignment="Stretch" Style="{StaticResource toggleButtonStyle}" VerticalAlignment="Stretch" HorizontalContentAlignment="Right" Grid.ColumnSpan="2" IsTabStop="False" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Foreground="{TemplateBinding Foreground}"> <Grid VerticalAlignment="Center" Margin="3,0"> <Path x:Name="BtnArrowBackground" Stretch="Fill" Height="4" Margin="0,2,0,0" Width="7" Data="M 0,0 C0,0 7,0 7,0 7,0 3.5,3.5 3.5,3.5 3.5,3.5 0,0 0,0 z"> <Path.Fill> <SolidColorBrush x:Name="BtnArrowColorBackground" Color="#FFFFFFFF"/> </Path.Fill> </Path> <Path x:Name="BtnArrowForeground" Stretch="Fill" Height="4" Width="7" Data="M 0,0 C0,0 7,0 7,0 7,0 3.5,3.5 3.5,3.5 3.5,3.5 0,0 0,0 z"> <Path.Fill> <SolidColorBrush x:Name="BtnArrowColorForeground" Color="#FF333333"/> </Path.Fill> </Path> </Grid> </ToggleButton> <StackPanel x:Name="MultiSelectConentPanel" Orientation="Horizontal" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="Stretch" /> </Grid> </Border>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1" Margin="1" IsHitTestVisible="false" Opacity="0"/>
<Rectangle x:Name="DisabledVisualElement" Fill="White" RadiusX="1" RadiusY="1" IsHitTestVisible="false" Opacity="0"/>
</Grid> </ControlTemplate>
</Setter.Value> </Setter>
</Style></ResourceDictionary>
Is there someone in infragistics who can help out!
Regards,
Rajiv
Hello Rajiv,
Thank you for your post. I have been looking into the issue that you have described and using the sample that Elena has uploaded, I was not able to reproduce it. I have replaced the styles from the sample with the one that you have provided and when there is one item in the ItemsSource, the Item and the Select all item are shown. Also in the style that you are using, you have a CheckBoxIsCheckedConverter, which is not part of Elena’s solution.
Would you please provide me with the code of the CheckBoxIsCheckedConverter to test whether the issue is caused by this converter, or if possible, would you please provide me with a sample to show the issue?
Looking forward to hearing from you.
Sincerely,
Krasimir, MCPD
Developer Support Supervisor - XAML
Infragistics
www.infragistics.com/support
Thank you for the sample application. I have been looking into it and the reason for the behavior is that you are using version 12.2 and the original sample was created for 11.2. In version 12.2, the height of the drop down of the XamComboEditor is calculated differently and when you have a single item, the XamComboEditor is calculating the drop down’s height to show only this item and since you are adding a CheckBox in the template, it covers the single item in the drop down and only the “Select All” is appearing. In order to use this approach in the 12.2 version, I can suggest setting the MinHeight of the root Border of the Popup in the Template, so it have enough space to show both the “Select All” and the item. If you have more items, a scroll bars will appeared and you will be able to see all items. I have modified the sample application that you have sent, to show how you can implement this approach.
Please let me know if you need any further assistance on the matter.
I am just checking if you require any further assistance on the matter.
Still the problem persists, when we have only 2 items the horizontal scrollbar hides the 2nd item.
Thank you for reply. As I have mentioned previously, the reason for the behavior is that the drop down’s height is calculated differently, and it is calculating how much size it will need to render all the items. When you are manually some items in the DropDown, you are breaking that logic and as I have mentioned, you should set the MinHeight of the RootPopupElement border so it have enough space to include the scrollbars and the additional content that you have added in the popup.
The functionality that you are trying to achieve is not built-in to the xamComboEditor and implementing such approaches can cause some issues, as it is in your scenarios. You can set the MinHeight of the border to a bigger value, which should provide enough space for the drop down to draw its content.
Since this is a custom functionality that is not built-in to the xamComboEditor, you can submit a new Product Idea for having header templates for the XamComboEditor. You can submit your product idea at http://ideas.infragistics.com/.
Also, if you need assistance with implementing such custom functionalities with our controls, you can contact our Consulting Service Team. You can read more details regarding the Consulting Services here: http://d3.infragistics.com/.
I have already answered your other forum thread:
http://ko.infragistics.com/community/forums/p/90885/449362.aspx
which is similar to the last question.
Hi Krashmir,
Still there is some problems in this solution, as when i am adding 4 items with the scroll bar, the down scrollbar button doesn't work.
Please help.