Problem using ScaleTransform

5 posts, 1 answers
  1. Greg Brondo
    Greg Brondo avatar
    13 posts
    Member since:
    Sep 2009

    Posted 05 Mar 2010 Link to this post

    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> 
     



  2. Answer
    Alex
    Alex avatar
    127 posts
    Member since:
    Mar 2010

    Posted 07 Mar 2010 Link to this post

    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"> 


  3. DevCraft Release
  4. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts
    Member since:
    Sep 2012

    Posted 08 Mar 2010 Link to this post

    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.

  5. Greg Brondo
    Greg Brondo avatar
    13 posts
    Member since:
    Sep 2009

    Posted 08 Mar 2010 Link to this post

    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.

  6. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts
    Member since:
    Sep 2012

    Posted 08 Mar 2010 Link to this post

    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.

Back to Top
DevCraft Release