This is a migrated thread and some comments may be shown as answers.

Using a keyed RadListBoxItem template

3 Answers 191 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Murray
Top achievements
Rank 2
Murray asked on 01 Oct 2012, 01:57 AM
Hi

I have defined the style and template for the RadListBox and RadListBoxItem. I also need to key a different style where there ListBoxItem selected state doesnt show a selection.

My issue is we don't define the items in XAML, just ising an itemsource on the ListBox.

Any idea how I can tell a RadListBox to use a particular keyed ListBoxItem style?

<!--RadListBoxItemNoSelect-->
    <Style x:Key="RadListBoxItemNoSelect" TargetType="telerik:RadListBoxItem">
        <Setter Property="Padding" Value="3" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Foreground" Value="{StaticResource MarkerBrush}" />
        <Setter Property="TabNavigation" Value="Local" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadListBoxItem">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <!--<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource BasicBrush}" />
                                        </ObjectAnimationUsingKeyFrames>-->
 
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="SelectedBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="SelectedBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <!-- normal-->
                        <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" />
                        <Border x:Name="SelectedBorder" Opacity="0.4" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource BasicBrush}" Visibility="Collapsed" />
                        <ContentControl x:Name="contentPresenter" Margin="{TemplateBinding Padding}" Foreground="{TemplateBinding Foreground}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                        <!-- Focus -->
                        <Border x:Name="FocusVisual" Opacity="0" Margin="1" BorderThickness="1" BorderBrush="{StaticResource MarkerBrush}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I don't want this Item style to be global, just on certain RadListBox implimentations.

Thanks so much
Murray

p.s Here is an example of the implimentation of the RadListBox

<telerik:RadDropDownButton  Grid.Column="0" 
                VerticalAlignment="Center"
                Margin="4,0"
                Content="Export"
                Visibility="{Binding IsExportVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
    <telerik:RadDropDownButton.DropDownContent>
        <telerik:RadListBox     ScrollViewer.VerticalScrollBarVisibility="Hidden"
                    Name="ExportList"
                    IsEnabled="{Binding CanRunQuery}"
                    ItemsSource="{Binding ExportTypeList}" 
                    DisplayMemberPath="Code"
                    Command="{Binding ExportCommand}"
                    Text="{Binding ExportType, Mode=TwoWay}"></telerik:RadListBox>
    </telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>

3 Answers, 1 is accepted

Sort by
0
Murray
Top achievements
Rank 2
answered on 01 Oct 2012, 11:05 AM
Sorry you can close this. Teach me to post late Sunday night.

Just used
ItemContainerStyle="{StaticResource RadListBoxItemNoSelect}"

 

 

 

0
Lori
Top achievements
Rank 1
answered on 23 Oct 2013, 04:42 PM
Hi Murray,

I'm trying to follow your example but I'm missing something.  I define my style, then set the ItemContainerStyle property on the RadListBox to that style. At runtime I get an exception that the content has been defined more than once.  Like you, my RadListBox is bound to an item source in a view model. What am I missing? 

Thanks
Lori
0
Murray
Top achievements
Rank 2
answered on 24 Oct 2013, 03:02 PM
Lori, try this sample project.

www.muzman.net/telerik/RadListBox.zip
Tags
ListBox
Asked by
Murray
Top achievements
Rank 2
Answers by
Murray
Top achievements
Rank 2
Lori
Top achievements
Rank 1
Share this question
or