RadListBox MergedDictionaries Bug

[John]

 

Hi,

I have a problem with RadListBox that I think is a bug.
If styles MergedDictionaries in App.xaml and remove selected item not problem only problem styles MergedDictionaries in MainWindow.xaml remove item exception error.

Microsoft listbox in both cases no problem.
 
Please see uploaded project.
http://www.solidfiles.com/d/c9a834481c

Thanks so much.

Style:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Brushes.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <!--CONTACT LIST BOX ITEM STYLE -->
    <ControlTemplate TargetType="telerik:RadListBoxItem" x:Key="ListBoxItemTemplate">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver"/>
                    <VisualState x:Name="Disabled"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="SelectionStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0:0:0.3">
                            <VisualTransition.GeneratedEasingFunction>
                                <CircleEase EasingMode="EaseOut"/>
                            </VisualTransition.GeneratedEasingFunction>
                        </VisualTransition>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Unselected"/>
                    <VisualState x:Name="Selected">
                        <Storyboard>
                            <DoubleAnimation Duration="0" To="200" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="selectedGrid"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0:0:0.3">
                            <VisualTransition.GeneratedEasingFunction>
                                <CircleEase EasingMode="EaseOut"/>
                            </VisualTransition.GeneratedEasingFunction>
                        </VisualTransition>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Focused">
                        <Storyboard>
                            <!--DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="focus"/>-->
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unfocused"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="ValidationStates"/>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="border" BorderThickness="{TemplateBinding BorderThickness}"
                    Background="#FF434343" BorderBrush="#FF767676">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid x:Name="readOnlyGrid" Height="60" Margin="1,0,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column="1" Text="{Binding AssemblyName}" TextWrapping="Wrap" FontFamily="Segoe UI" FontSize="14"
                            HorizontalAlignment="Left" VerticalAlignment="Center"
                            Foreground="{StaticResource MainBrush}" Margin="20,0,0,0"/>
                    </Grid>
                    <Grid x:Name="selectedGrid" Height="0" Margin="1,0,0,0" Background="#FF434343">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <StackPanel Grid.Column="1" Margin="16" HorizontalAlignment="Left">
                            <TextBlock TextWrapping="Wrap" Text="{Binding Name}" FontFamily="Segoe UI Light" FontSize="24" Foreground="{DynamicResource AccentBrush}" HorizontalAlignment="Left"/>
                            <TextBlock Text="{Binding Phone}" FontFamily="Segoe UI" FontSize="16" Foreground="{StaticResource MainBrush}" HorizontalAlignment="Left" Margin="0,2,0,0"/>
                            <TextBlock Text="{Binding Zip}" FontFamily="Segoe UI" FontSize="12" Foreground="{StaticResource BasicBrush}" HorizontalAlignment="Left" Margin="0,2,0,0"/>

                        </StackPanel>
                    </Grid>
                </Grid>
            </Border>

        </Grid>

    </ControlTemplate>

    <Style TargetType="telerik:RadListBoxItem">
        <Setter Property="Template" Value="{StaticResource ListBoxItemTemplate}"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="Background" Value="#FF434343" />
        <Setter Property="BorderBrush" Value="{StaticResource StrongBrush}" />
        <Setter Property="BorderThickness" Value="8,0,1,1" />
        <Setter Property="Foreground" Value="{StaticResource MarkerBrush}"/>
        <!--Setter Property="TabNavigation" Value="Local" />-->
    </Style>

    <!-- LIST BOX STYLE -->
    <Style TargetType="telerik:RadListBox">
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="IsTabStop" Value="False" />
        <!--Setter Property="TabNavigation" Value="Once" />-->
    </Style>
</ResourceDictionary>

 
Brush:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <telerik:Windows8Theme x:Key="Theme" />

    <!--MAIN UI BRUSHES-->
    <SolidColorBrush x:Key="AccentBrush" telerik:Windows8Colors.Color="Accent" />
    <SolidColorBrush x:Key="BasicBrush" telerik:Windows8Colors.Color="Basic" />
    <SolidColorBrush x:Key="StrongBrush" telerik:Windows8Colors.Color="Strong" />
    <SolidColorBrush x:Key="MainBrush" telerik:Windows8Colors.Color="Main" />
    <SolidColorBrush x:Key="MarkerBrush" telerik:Windows8Colors.Color="Marker" />
    <SolidColorBrush x:Key="ValidationBrush" telerik:Windows8Colors.Color="Validation" />

    <!--CATHEGORY BRUSHES-->
    <SolidColorBrush x:Key="MailBrush" Color="#FF25A0DA" />
    <SolidColorBrush x:Key="CallBrush" Color="#FFED1691" />
    <SolidColorBrush x:Key="MeetBrush" Color="#FFDAA125" />

    <!--STATUS / PRIORITY BRUSHES-->
    <SolidColorBrush x:Key="RedBrush" Color="#FFE61E26" />
    <SolidColorBrush x:Key="YellowBrush" Color="#FFDAA125" />
    <SolidColorBrush x:Key="GreenBrush" Color="#FF679700" />

</ResourceDictionary>

 
Main XAML:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        x:Class="RadListBoxTest.MainWindow"
        Title="MainWindow" Height="500" Width="800" >

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Brushes.xaml"/>
                <ResourceDictionary Source="RadListBoxStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>
        <telerik:RadListBox x:Name="RadListBox" ItemsSource="{Binding Assemblies}" SelectedIndex="0" SelectionMode="Extended" AllowDrop="True" Margin="0,0,0,69"/>

        <Button Content="Add Items" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="150" Height="30" Margin="246,0,396,0" Click="Button_Click_2"/>
        <Button Content="Remove Selected Items" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="150" Height="30" Click="Button_Click_1" Margin="463,0,179,0"/>



    </Grid>
</Window>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        RadListBox.ItemsSource = Agencies;
    }

    private ObservableCollection<Agency> agencies;
    public ObservableCollection<Agency> Agencies
    {
        get
        {
            if (agencies == null)
            {
                agencies = new ObservableCollection<Agency>();
            }
            return agencies;
        }
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        if (RadListBox.SelectedItems != null && RadListBox.SelectedItems.Count > 0)
        {
            var items = RadListBox.SelectedItems.OfType<Agency>().ToArray();
            int selIdx = RadListBox.SelectedIndex;
            foreach (Agency i in items)
                Agencies.Remove(i);
            if (items.Length == 1)
            {
                if (selIdx < Agencies.Count)
                    RadListBox.SelectedIndex = selIdx;
                else
                    RadListBox.SelectedIndex = Agencies.Count - 1;
            }
            else
                RadListBox.SelectedIndex = Agencies.Count - 1;
        }
    }

    private void Button_Click_2(object sender, RoutedEventArgs e)
    {
        agencies.Add(new Agency("Exotic Liquids", "[phone]", "EC1 4SD"));
        agencies.Add(new Agency("New Orleans Cajun Delights", "[phone]", "70117"));
        agencies.Add(new Agency("Grandma Kelly's Homestead", "[phone]", "48104"));
        agencies.Add(new Agency("Tokyo Traders", "[phone]", "100"));
        agencies.Add(new Agency("Cooperativa de Quesos 'Las Cabras'", "(98) 598 76 54", "33007"));
        agencies.Add(new Agency("Mayumi's", "[phone]", "545"));
        agencies.Add(new Agency("Pavlova, Ltd.", "[phone]", "3058"));
        agencies.Add(new Agency("Specialty Biscuits, Ltd.", "[phone]", "M14 GSD"));
        agencies.Add(new Agency("PB Knäckebröd AB", "031-987 65 43", "S-345 67"));
        agencies.Add(new Agency("Refrescos Americanas LTDA", "(11) 555 4640", "5442"));
    }
}

[John]

RadListBox 2013 Q1 in Design mode this error.

Error 1 Type reference cannot find type named '{clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls}RadLegend'. C:\Users\John\Documents\Visual Studio 2012\Projects\RadListBoxTest\RadListBoxTest\RadListBoxTest\MainWindow.xaml 18 9 RadListBoxTest

[John]

This Style with more items scrolling error standard ListBox not problem. :(

[Masha]

Hello John,

You can not animate the Height property directly. Unless you explicitly assign it, WPF will try to interpolate to NaN. That is the reason RadListBox has thrown the exception. Instead, give your element a LayoutTransform <ScaleTransform/> and animate the ScaleX and ScaleY parameters of that transformation.

Another  solution is to create an attached property for the height that sets the height property on the target control, this way you can animate height using your attached property.

Unfortunately we could not reproduce the error in the DesignMode you wrote to us in your previous post. I tested with the project you had uploaded with latest binaries.

I hope it helps.

Regards,
Maria
the Telerik team

[John]

Hi, Thanks for reply,

I'm tried this style with standard listbox not issue only issue with RadListBox.

[John]

Hi,

Changed Animation, Again with the remove selected item no problem,
Now I have just one problem when ScrollViewer.CanContentScroll property change to False if have a lot of items selected item opens outside the listbox.

<VisualStateGroup x:Name="SelectionStates">
    <VisualState x:Name="Unselected">
        <Storyboard>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="selectedGrid" Storyboard.TargetProperty="(FrameworkElement.Height)">
                <EasingDoubleKeyFrame KeyTime="00:00:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
    <VisualState x:Name="Selected">
        <Storyboard>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="selectedGrid" Storyboard.TargetProperty="(FrameworkElement.Height)">
                <EasingDoubleKeyFrame KeyTime="00:00:0.5" Value="200"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="focus"/>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

[Masha]

Hello John,

I'm glad you managed to resolve the issue with the animation.

I was unable to reproduce the issue with ScrollViewer.CanContentScrolproeprty. Please try setting ScrollViewer.CanContentScroll this way:

<ScrollViewer Focusable="False" CanContentScroll="False"
                 HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
           <telerik:RadListBox x:Name="RadListBox" ItemsSource="{Binding Assemblies}" SelectedIndex="0" SelectionMode="Multiple" AllowDrop="True" Margin="0,0,0,69"
                   >

           </telerik:RadListBox>
       </ScrollViewer>

Let me know if this solution works for you. If you still have any problems please send me where you set ScrollViewer.CanContentScroll property and I'll do my best to help you.

Kind regards,
Maria
the Telerik team

[John]

Hello Maria,

I'm Tried HorizontalScrollBarVisibility and VerticalScrollBarVisibility set to Auto not Scrolling with mouse scrollwheel.

Thanks so much.

[John]

Hello,
Whether this issue will be resolved?

Thanks.

[Masha]

Hello John,

You could disable the mouse wheel inside the RadListBox using attached behavior, which forwarding the event back up and out of the ListBox.

Please review the attached example and let me know it this solution works for you.

Kind regards,
Maria
the Telerik team

[John]

Hello,

I do not want disable the mouse scrollwheel, Please try this code after HorizontalScrollBarVisibility and VerticalScrollBarVisibility set to Auto not Scrolling with mouse scrollwheel.

Thanks.

<ScrollViewer Focusable="False" CanContentScroll="False" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="0,0,0,57">
    <telerik:RadListBox x:Name="RadListBox" ItemsSource="{Binding Assemblies}" SelectedIndex="0" SelectionMode="Multiple" AllowDrop="True"/>
</ScrollViewer>

[Masha]

Hello John,

Please excuse me for misunderstanding. Yes you are right the RadListBox is not scrolling when it is inisde the ScrollViewer.  I think the reason is that the RadListBox has an inbuild ScrollViewer and the event catched by the RadListBox for scrolling sets the IsHandled to true so it doesn't bubble up to parent ScrollViewer.

I suggest you to set the PreviewMouseWheel event on the ScrollViewer, which will handle the mouse wheel:

<ScrollViewer x:Name="ScrollView" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="400"  PreviewMouseWheel="RadListBox_PreviewMouseWheel">
                <telerik:RadListBox Grid.Row="1" x:Name="RadListBox" ItemsSource="{Binding Assemblies}" SelectedIndex="0" SelectionMode="Multiple" AllowDrop="True"
                              ScrollViewer.VerticalScrollBarVisibility="Disabled"  />
        </ScrollViewer>

and the RadListBox_PreviewMouseWheel method is shown below:

private void RadListBox_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
    ScrollViewer viewer = sender as ScrollViewer;

    double newOffset;

    if (e.Delta < 0)
    {
        newOffset = viewer.VerticalOffset - ((double)e.Delta / 360) * viewer.ActualHeight;

    }
    else
    {
        newOffset = viewer.VerticalOffset - ((double)e.Delta / 360) * viewer.ActualHeight;
    }
    viewer.ScrollToVerticalOffset(newOffset);

}

I hope this helps.

All the best,
Maria
the Telerik team