Avoid influencing of standard controls

8 posts, 1 answers
  1. herbert
    herbert avatar
    7 posts
    Member since:
    Nov 2017

    Posted 09 Nov Link to this post

    Hi

    I'm testing your product and I'm like it so far but there are some things I can not comprehend.

    I'm only using RadDocking by now and when I set the theme the behavior of my CustomListBox, which has nothing to do with your controls, changes.

    To be precise the wrapping doesn't work anymore.

    The pictures are attached below.

    How can I avoid such interactions?

     

     

  2. Sia
    Admin
    Sia avatar
    694 posts

    Posted 10 Nov Link to this post

    Hello,

    I am not sure what could cause such change of the behavior but it is possible one of our styles to change the behavior of a MS control for example. I need some more information about your project: 
    1. Do you use StyleManager or implicit styling?
    2. If you use implicit styling do you merge System.Windows.xaml in your application resources?
      <Application.Resources>
              <ResourceDictionary>
                  <ResourceDictionary.MergedDictionaries>
                      <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/System.Windows.xaml"/>
                      <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.xaml"/>
                      <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
                      <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
                      <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Docking.xaml"/>
                  </ResourceDictionary.MergedDictionaries>
              </ResourceDictionary>


    3. Can you please send us the CustomListBox style and implementation?

    I am looking forward to your reply.


    Regards,
    Sia
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. herbert
    herbert avatar
    7 posts
    Member since:
    Nov 2017

    Posted 15 Nov in reply to Sia Link to this post

    Thank you Sia for your reply

    First of all. Now it's working but I don't know why.

    I have moved the Telerik Resourses from App.xaml to my MainWindow.xaml which didn't immediately changed any behavior.

    Then I tried a different docking framework from an other vendor and switched back to your solution.

    Now it works.

    The thread can be closed but I'm a little confused. There are other side effects on using your framework. I will open a new thread tor each of them.

     

    Here is the Style of the CustomListBox:

    -------------------------------------------------------------

    <ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:conv="clr-namespace:GUIControlPack.Converter"
        xmlns:extap="clr-namespace:GUIControlPack.Extensions.AttachedProperties"
        xmlns:local="clr-namespace:GUIControlPack.ListBoxes"
        xmlns:pTB="clr-namespace:GUIControlPack.TextBoxes">



        <BooleanToVisibilityConverter x:Key="visibilityConverter" />

        <Image
            x:Key="ClearFilterImage"
            x:Shared="False"
            Source="/GUIControlPack;component/Images/ClearFilter.png" />
        <Image
            x:Key="SelectImage"
            x:Shared="False"
            Source="/GUIControlPack;component/Images/Select.png" />


        <SolidColorBrush x:Key="ListBox.Static.Background" Color="#FFF0F0F0" />

        <SolidColorBrush x:Key="ListBox.Static.Border" Color="#FFABADB3" />
        <SolidColorBrush x:Key="ListBox.Disabled.Background" Color="#FFFFFFFF" />
        <SolidColorBrush x:Key="ListBox.Disabled.Border" Color="#FFD9D9D9" />




        <Style TargetType="{x:Type local:TagBox}">
            <Setter Property="Background" Value="{StaticResource ListBox.Static.Background}" />
            <Setter Property="BorderBrush" Value="{StaticResource ListBox.Static.Border}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
            <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
            <Setter Property="ScrollViewer.PanningMode" Value="Both" />
            <Setter Property="AllowDrop" Value="False" />
            <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:TagBox}">

                        <DockPanel DataContext="{Binding}" LastChildFill="True">

                            <Grid DockPanel.Dock="Top" Visibility="{TemplateBinding IsFilterBoxVisible, Converter={StaticResource visibilityConverter}}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <pTB:PlaceHolderTextBox
                                    x:Name="PART_SearchBox"
                                    Grid.Column="0"
                                    Height="27"
                                    HorizontalContentAlignment="Center"
                                    VerticalContentAlignment="Center"
                                    FontSize="14"
                                    PlaceHolderText="{Binding PlaceHolderText, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ListBox}}, Mode=TwoWay}"
                                    Text="{Binding SearchText, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ListBox}}, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />

                                <StackPanel
                                    Grid.Column="1"
                                    HorizontalAlignment="Right"
                                    Orientation="Horizontal">

                                    <Button
                                        x:Name="PART_Button_ClearFilter"
                                        Width="30"
                                        Height="27"
                                        HorizontalContentAlignment="Stretch"
                                        VerticalContentAlignment="Stretch"
                                        Content="{StaticResource ClearFilterImage}" />


                                    <Button
                                        x:Name="PART_Button_Select"
                                        Width="30"
                                        Height="27"
                                        HorizontalContentAlignment="Stretch"
                                        VerticalContentAlignment="Stretch"
                                        Command="{Binding SelectCommand, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ListBox}}}"
                                        CommandParameter="{Binding SelectedItems, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ListBox}}}"
                                        Content="{StaticResource SelectImage}"
                                        Visibility="{TemplateBinding IsSelectButtonVisible,
                                                                     Converter={StaticResource visibilityConverter}}" />




                                </StackPanel>

                            </Grid>

                            <Border
                                x:Name="Bd"
                                Padding="1"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                SnapsToDevicePixels="true">
                                <ScrollViewer Padding="{TemplateBinding Padding}" Focusable="false">
                                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </ScrollViewer>
                            </Border>
                        </DockPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource ListBox.Disabled.Background}" />
                                <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource ListBox.Disabled.Border}" />
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsGrouping" Value="true" />
                                    <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false" />
                                </MultiTrigger.Conditions>
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapPanel
                            Margin="5"
                            IsItemsHost="True"
                            Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <ContentPresenter />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Visibility" Value="Visible" />
                        <Style.Triggers>
                            <Trigger Property="extap:Dragging.IsDragging" Value="True">
                                <Setter Property="Visibility" Value="Collapsed" />
                            </Trigger>
                            <Trigger Property="extap:Dragging.IsDragging" Value="False">
                                <Setter Property="Visibility" Value="Visible" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Setter.Value>
            </Setter>


        </Style>
    </ResourceDictionary>

     

    ---------------------------------------------

    And here is how I used it:

     <gcp:TagBox
                                        Grid.Column="1"
                                        Margin="10,0,0,0"
                                        ItemTemplateSelector="{StaticResource templateSelector}"
                                        ItemsSource="{Binding ColumnTags, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />

     

     

     

     

     

  4. herbert
    herbert avatar
    7 posts
    Member since:
    Nov 2017

    Posted 15 Nov in reply to herbert Link to this post

    Error is back. If I copy the telerik resources to the MainWindow.xaml the appearance is correct, but docking did not work anymore..

     

  5. herbert
    herbert avatar
    7 posts
    Member since:
    Nov 2017

    Posted 15 Nov Link to this post

    To be precise the  ScrollViewer.HorizontalScrollBarVisibility="Disabled" setting will be ignored if I merge your ResourceDictionaries.

     

    Here is a sample app:

    <Window
        x:Class="TelerikFilterApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vm="clr-namespace:TelerikFilterApp.ViewModel"
        Title="MainWindow"
        Width="525"
        Height="350"
        mc:Ignorable="d">
        <Window.Resources>
            <ResourceDictionary>

                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/System.Windows.xaml" />
                    <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.xaml" />
                    <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.Navigation.xaml" />
                    <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.Docking.xaml" />

                </ResourceDictionary.MergedDictionaries>

                <vm:MainViewModel x:Key="VM" />

                <Style x:Key="TagTextBlockStyle" TargetType="TextBlock">
                    <!--<Setter Property="Margin" Value="5" />-->
                    <Setter Property="Padding" Value="5,5,12,5" />
                    <Setter Property="Foreground" Value="White" />
                    <Setter Property="Text" Value="{Binding Name}" />

                </Style>

                <DataTemplate x:Key="BaseTemplate" DataType="Person">
                    <Border Margin="5" Background="#AF51B8F2">
                        <Grid>
                            <Grid Background="#FF51B8F2" IsHitTestVisible="False" />
                            <TextBlock Style="{StaticResource TagTextBlockStyle}" />
                        </Grid>
                    </Border>

                </DataTemplate>

            </ResourceDictionary>

        </Window.Resources>



        <ListBox
            DataContext="{StaticResource VM}"
            ItemTemplate="{StaticResource BaseTemplate}"
            ItemsSource="{Binding Persons, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled">

            <ListBox.Style>
                <Style TargetType="ListBox">
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <WrapPanel
                                    Margin="5"
                                    IsItemsHost="True"
                                    Orientation="Horizontal" />
                            </ItemsPanelTemplate>

                        </Setter.Value>
                    </Setter>
                    <Setter Property="ItemContainerStyle">
                        <Setter.Value>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <ContentPresenter />
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Visibility" Value="Visible" />

                            </Style>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.Style>


        </ListBox>

    </Window>

     

    --------------------------------------------------------------------------------

    Code behind:

     

     

    using System.Windows;

    namespace TelerikFilterApp
    {
        /// <summary>
        /// Interaktionslogik für MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
        }
    }

     

    -----------------------------

    ViewModel:

     

    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    using TelerikFilterApp.Model;

    namespace TelerikFilterApp.ViewModel
    {
        public class MainViewModel : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;

            //private ICollectionView _currentView;

            //public ICollectionView CurrentView { get { return _currentView; } set { _currentView = value; OnPropertyChanged(); } }


            private ObservableCollection<Person> _persons;

            public ObservableCollection<Person> Persons
            {
                get { return _persons; }
                set { _persons = value; OnPropertyChanged(); }
            }



            public MainViewModel()
            {

                _persons = new ObservableCollection<Person>();

                for (int i = 0;i< 10; i++)
                {
                    _persons.Add(new Person() { Nbr = i, Name = "Hugo " + i });
                }

                OnPropertyChanged("Persons");
            }

            public void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }

        }
    }

     

    ---------------

    Model:

     

    namespace TelerikFilterApp.Model
    {
        public class Person
        {
            private int _nbr;

            public int Nbr
            {
                get { return _nbr; }
                set { _nbr = value; }
            }

            private string _name;

            public string Name
            {
                get { return _name; }
                set { _name = value; }
            }

        }
    }

     

     

     

     

     

     

     

  6. Answer
    Sia
    Admin
    Sia avatar
    694 posts

    Posted 20 Nov Link to this post

    Hello,

    From the code provided it seems that the described problem is caused by not basing your styles on the Telerik ones which is needed for the MS controls as well.
    In your case it is important to base the ListBox style on ListBoxStyle and the ListBoxItem style on ListBoxItemStyle. Since you set custom template to the second, you can skip this step if you want to fully overwrite our style. If you do not base the ListBox style, it will fallback to the default MS one. The ScrollViewer.HorizontalScrollBarVisibility property works as expected on my end.

    <Style TargetType="ListBox" BasedOn="{StaticResource ListBoxStyle}">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel
            Margin="5"
            IsItemsHost="True"
            Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ListBoxItem" BasedOn="{StaticResource ListBoxItemStyle}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <ContentPresenter />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Visibility" Value="Visible" />
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

    Usually moving the merged resources should not affect the behavior of our controls.

    Regards,
    Sia
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  7. herbert
    herbert avatar
    7 posts
    Member since:
    Nov 2017

    Posted 22 Nov in reply to Sia Link to this post

    Thank you Sia for your reply.

    I really do not understand it why this particular property didn't work and the others do, but if I set my style locally, it's now working with the solution you provided to me. So now I have to figure out how to edit my own custom controls and hope it will work as well.

    Best regards

    Herbert

     

     

     

     

  8. Sia
    Admin
    Sia avatar
    694 posts

    Posted 22 Nov Link to this post

    Hello,

    In my opinion it is caused by missing TemplateBindings of the ScrollViewer in the ListBox default template. That is why the property is not respected. Please check the attached project for reference. ListBoxStyle1 is the default MS style, ListBoxStyle2 is our style for VisualStudio2013.
    <ScrollViewer x:Name="ScrollViewer"
                                  Margin="0"
                                  BorderBrush="{x:Null}"
                                  BorderThickness="0"
                                  Padding="{TemplateBinding Padding}"
                                  ScrollViewer.HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  ScrollViewer.VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  Background="{TemplateBinding Background}">
                                  <ItemsPresenter/>
                              </ScrollViewer>



    Regards,
    Sia
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top