Problem using ScaleTransform

[Greg Brondo]

I have the RadTileView set as the main screen. Then the content of a RadTileViewItem is a user control that I have created. Inside the user control I have a grid with a RenderTransform which in turn has a ScaleTransform with ScaleX and ScaleY set to 1. In the code behind, I register for the SizeChanged event and set the ScaleTransform to a new value to scale the contents of the grid in or out to fit the size of the control.

The problem comes in that if the tile containing this is maximized, then the user control fills from the bottom of the header to the bottom of the screen and the entire left to right portion of the screen. (In typical mode with the minimized tiles along the right edge all tiles disappear except the header of the top right tile.

I have attached a screen shot of my result. Below is the XMAL in my control:

<UserControl x:Class="SilverlightApplication8.TestView"
             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"
             mc:Ignorable="d"
             d:DesignWidth="400"
             d:DesignHeight="300">
    <Grid x:Name="LayoutRoot"
          Background="White">
        <Grid.RenderTransform>
            <ScaleTransform x:Name="myScale"
                            ScaleX="1"
                            ScaleY="1" />
        </Grid.RenderTransform>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="75" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="75" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Text="First"
                   Grid.Column="0"
                   Grid.Row="0"
                   Margin="10,5,0,0" />
        <TextBox Grid.Column="1"
                 Grid.Row="0"
                 Margin="10,5,0,0" />
        <TextBlock Text="Last"
                   Grid.Column="2"
                   Grid.Row="0"
                   Margin="10,5,0,0" />
        <TextBox Grid.Column="3"
                 Grid.Row="0"
                 Margin="10,5,0,0" />
        <TextBlock Text="Something"
                   Grid.Column="0"
                   Grid.Row="1"
                   Margin="10,5,0,0" />
        <TextBox Grid.Column="1"
                 Grid.Row="1"
                 Margin="10,5,0,0" />
        <TextBlock Text="Else"
                   Grid.Column="2"
                   Grid.Row="1"
                   Margin="10,5,0,0" />
        <TextBox Grid.Column="3"
                 Grid.Row="1"
                 Margin="10,5,0,0" />
    </Grid>
</UserControl>

The code behind is below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication8
{
    public partial class TestView : UserControl
    {
        private double _orgWidth = 400;
        private double _orgHeight = 300;
        private double _orgAspectRatio = 400 / 300;

        public TestView()
        {
            InitializeComponent();
            SizeChanged += new SizeChangedEventHandler(TestView_SizeChanged);
        }

        void TestView_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (e.NewSize.Width / e.NewSize.Height > _orgAspectRatio)
            {
                myScale.ScaleY = e.NewSize.Height / _orgHeight;
                myScale.ScaleX = myScale.ScaleY;
            }
            else
            {
                myScale.ScaleX = e.NewSize.Width / _orgWidth;
                myScale.ScaleY = myScale.ScaleX;
            }
        }
    }
}

My MainPage xmal:

<UserControl x:Class="SilverlightApplication8.MainPage"
             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:loc="clr-namespace:SilverlightApplication8"
             xmlns:nav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
             mc:Ignorable="d"
             d:DesignWidth="640"
             d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <nav:RadTileView>
            <nav:RadTileViewItem Header="Test View">
                <loc:TestView />
            </nav:RadTileViewItem>
            <nav:RadTileViewItem Header="One">

            </nav:RadTileViewItem>
            <nav:RadTileViewItem Header="Two" />
            <nav:RadTileViewItem Header="Three" />
        </nav:RadTileView>
    </Grid>
</UserControl>

[Alex]

Heh, I made this problem the other day (at least I suspect it is)

When applying a render transform to auto sizing grid (or similar), the grid will resize it self to fill the whole tile space, then it will be scale transformed (so the size is increased twice, resulting in the problem compounding if you stretch the grid larger and larger (i.e if the tile could resize)


Applying a FIXED size to your initial grid should solve this problem.
i.e. Change this
    <Grid x:Name="LayoutRoot"            Background="White">
to
    <Grid x:Name="LayoutRoot"            Background="White" height ="xxx" width="yyy"> 

[Tihomir Petkov]

Hi Greg,

Did Alexander's suggestion solve the problem?

Kind regards,
Tihomir Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Greg Brondo]

Alexander's suggestion put me on the right track to solving the problem. In addition to making the size of the grid fixed, I found I needed to make the user control's design size the same as the size of the grid for a perfect fit. I now have a nice control that fills the space and grows and shrinks with the changing size of the tile it is in.

Thank you.

[Tihomir Petkov]

Hi Greg,

I'm glad you were able to resolve the problem. Thank you for sharing the solution.

Kind regards,
Tihomir Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.