RadListBox MergedDictionaries Bug

12 posts, 1 answers
  1. John
    John avatar
    26 posts
    Member since:
    Mar 2012

    Posted 25 Mar 2013 Link to this post

     

    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
     
        <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
     
        <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
            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", "(171) 555-2222", "EC1 4SD"));
            agencies.Add(new Agency("New Orleans Cajun Delights", "(100) 555-4822", "70117"));
            agencies.Add(new Agency("Grandma Kelly's Homestead", "(313) 555-5735", "48104"));
            agencies.Add(new Agency("Tokyo Traders", "(03) 3555-5011", "100"));
            agencies.Add(new Agency("Cooperativa de Quesos 'Las Cabras'", "(98) 598 76 54", "33007"));
            agencies.Add(new Agency("Mayumi's", "(06) 431-7877", "545"));
            agencies.Add(new Agency("Pavlova, Ltd.", "(03) 444-2343", "3058"));
            agencies.Add(new Agency("Specialty Biscuits, Ltd.", "(161) 555-4448", "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"));
        }
    }
  2. John
    John avatar
    26 posts
    Member since:
    Mar 2012

    Posted 25 Mar 2013 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. John
    John avatar
    26 posts
    Member since:
    Mar 2012

    Posted 26 Mar 2013 Link to this post

    This Style with more items scrolling error standard ListBox not problem. :(
  5. Masha
    Admin
    Masha avatar
    355 posts

    Posted 26 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. John
    John avatar
    26 posts
    Member since:
    Mar 2012

    Posted 26 Mar 2013 Link to this post

    Hi, Thanks for reply,

    I'm tried this style with standard listbox not issue only issue with RadListBox.
  7. John
    John avatar
    26 posts
    Member since:
    Mar 2012

    Posted 27 Mar 2013 Link to this post

    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>
  8. Masha
    Admin
    Masha avatar
    355 posts

    Posted 27 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  9. John
    John avatar
    26 posts
    Member since:
    Mar 2012

    Posted 27 Mar 2013 Link to this post

    Hello Maria,

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

    Thanks so much.
  10. John
    John avatar
    26 posts
    Member since:
    Mar 2012

    Posted 29 Mar 2013 Link to this post

    Hello,
    Whether this issue will be resolved?

    Thanks.
  11. Masha
    Admin
    Masha avatar
    355 posts

    Posted 02 Apr 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  12. John
    John avatar
    26 posts
    Member since:
    Mar 2012

    Posted 02 Apr 2013 Link to this post

    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>
  13. Answer
    Masha
    Admin
    Masha avatar
    355 posts

    Posted 05 Apr 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready