Interactive MinimizedColumnWidth

[Clint Singer]

I would like to know what it would take to make the MinimizedColumnWidth on the RadTileView interactive. 

The scenario that I have consists of two RadTileViewItems but when one of the views is collapsed it goes to a fixed size.  I would like the user to be able to click on something like a gridsplitter between the large view and the collapsed views so they can resize to a new MinimizedColumnWidth.  When the user hits one of the toggle buttons to swap the old collapsed view, the newly collapsed view will keep the user selected MinimizedColumnWidth until they decide that they want to change it again via the splitter.

It would be like having dockpanels where there is splitter between a panel on the side and the main document area but the views are swappable like a TileView.

Cheers! 

[Tihomir Petkov]

Hi Clint,

The TileView control does not currently support the scenario you described. However, this would be a nice feature and we will consider implementing it.

I added 500 Telerik points to your account for this feature suggestion.

Kind regards,
Tihomir Petkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Clint Singer]

Hi,

Instead of waiting for the control to be updated in the toolkit, I decided I would implement one of my own.  I have attached it for anyone else who would like interactive minimum column and row sizes.

It is basically a templated control with RadTileView as the base class.  A theme is supplied with contains the various parts used by the control to make it interactive.

I would have just attached the files but it seems that only pictures can be attached.  Here is the code:

namespace Controls
{
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    using Telerik.Windows;
    using Telerik.Windows.Controls;
    using Dock = Telerik.Windows.Controls.Dock;

    [TemplatePart(Name = PART_LeftColumn, Type = typeof(ColumnDefinition))]
    [TemplatePart(Name = PART_RightColumn, Type = typeof(ColumnDefinition))]
    [TemplatePart(Name = PART_ColumnSplitter, Type = typeof(GridSplitter))]
    [TemplatePart(Name = PART_RowSplitter, Type = typeof(GridSplitter))]
    public class AdjustableTileView : RadTileView
    {
        public const string PART_LeftColumn = "PART_LeftColumn";
        public const string PART_RightColumn = "PART_RightColumn";
        public const string PART_ColumnSplitter = "PART_ColumnSplitter";
        public const string PART_RowSplitter = "PART_RowSplitter";

        private bool isDrag;

        private ColumnDefinition column;

        private RowDefinition row;

        private GridSplitter splitter;

        private bool isRowSplit;

        public AdjustableTileView()
        {
            this.isDrag = false;

            this.isRowSplit = false;

            this.DefaultStyleKey = typeof(AdjustableTileView);
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            if (this.MinimizedItemsPosition == Dock.Left)
            {
                this.column = GetTemplateChild("PART_LeftColumn") as ColumnDefinition;
                this.splitter = GetTemplateChild("PART_ColumnSplitter") as GridSplitter;
            }
            else if (this.MinimizedItemsPosition == Dock.Right)
            {
                this.column = GetTemplateChild("PART_RightColumn") as ColumnDefinition;
                this.splitter = GetTemplateChild("PART_ColumnSplitter") as GridSplitter;
            }
            else if (this.MinimizedItemsPosition == Dock.Top)
            {
                this.row = GetTemplateChild("PART_TopRow") as RowDefinition;
                this.splitter = GetTemplateChild("PART_RowSplitter") as GridSplitter;
                this.isRowSplit = true;
            }
            else if (this.MinimizedItemsPosition == Dock.Bottom)
            {
                this.row = GetTemplateChild("PART_BottomRow") as RowDefinition;
                this.splitter = GetTemplateChild("PART_RowSplitter") as GridSplitter;
                this.isRowSplit = true;
            }

            if (this.column != null)
            {
                this.column.Width = new GridLength(this.MinimizedColumnWidth);
            }
            else if (this.row != null)
            {
                this.row.Height = new GridLength(this.MinimizedRowHeight);
            }

            if (this.splitter != null)
            {
                this.splitter.MouseLeftButtonDown += Splitter_MouseLeftButtonDown;
                this.splitter.MouseLeftButtonUp += Splitter_MouseLeftButtonUp;
                this.splitter.MouseMove += Splitter_MouseMove;

                this.splitter.Visibility = Visibility.Collapsed;
            }

            this.Restored += TileView_Restored;
            this.Maximized += TileView_Maximized;
        }

        void TileView_Maximized(object sender, RadRoutedEventArgs e)
        {
            this.splitter.Visibility = Visibility.Visible;
        }

        void TileView_Restored(object sender, RadRoutedEventArgs e)
        {
            this.splitter.Visibility = Visibility.Collapsed;
        }

        private void Splitter_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.isDrag = true;
        }

        private void Splitter_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (this.isDrag == true)
            {
                if (this.isRowSplit == true)
                {
                    this.MinimizedRowHeight = this.row.Height.Value;
                }
                else
                {
                    this.MinimizedColumnWidth = this.column.Width.Value;
                }

                this.isDrag = false;
            }
        }

        private void Splitter_MouseMove(object sender, MouseEventArgs e)
        {
            if (this.isDrag == true)
            {
                if (this.isRowSplit == true)
                {
                    this.MinimizedRowHeight = this.row.Height.Value;
                }
                else
                {
                    this.MinimizedColumnWidth = this.column.Width.Value;
                }
            }
        }
    }
}

And from generic.xaml

<ResourceDictionary
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
   xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
   xmlns:localControls="clr-namespace:Controls"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d">

  <Style TargetType="localControls:AdjustableTileView">
    <Setter Property="ItemsPanel">
      <Setter.Value>
        <ItemsPanelTemplate>
          <Canvas Background="Transparent"/>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="localControls:AdjustableTileView">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition x:Name="PART_TopRow"/>
              <RowDefinition Height="8"/>
              <RowDefinition x:Name="PART_BottomRow"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition x:Name="PART_LeftColumn" />
              <ColumnDefinition Width="8"/>
              <ColumnDefinition x:Name="PART_RightColumn" />
            </Grid.ColumnDefinitions>
            <ItemsPresenter Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="3"/>
            <controls:GridSplitter x:Name="PART_ColumnSplitter" Visibility="Collapsed" HorizontalAlignment="Stretch" Grid.Column="1" Grid.RowSpan="3" Background="#00D23A3A" />
            <controls:GridSplitter x:Name="PART_RowSplitter" Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" Grid.ColumnSpan="3" Background="#00D23A3A" />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

[Tihomir Petkov]

Hello Clint,

Thank you for sharing your work with the community. I hope it will be usefull to people who do not want to wait until the feature is implemented in the official version of the control.

I also updated your Telerik points.

Regards,
Tihomir Petkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.