locked
How to position a user control inside Grid RRS feed

  • Question

  • Hi, my user control consists of a text box and rectangle. I want to position it inside a grid in a specific cell but not able to do it. Below is my sample code

    <UserControl
        x:Class="UserControlSample.MyTextControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:UserControlSample"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400">
        
        <Grid>
            <Rectangle></Rectangle>
            <TextBlock FontSize="30" >Sample</TextBlock>
        </Grid>
        
    </UserControl>
    <Page
        x:Class="UserControlSample.BlankPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:UserControlSample"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
    
    
            <local:MyTextControl Grid.Column="1" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"></local:MyTextControl>
            
        </Grid>
    </Page>
    I am expecting the user control to be in the middle cell but this is not happening. Any idea ?

    Friday, March 16, 2012 5:36 AM

Answers

  • Thanks guys. When I coded it a yellow exclamation mark started appearing on the design preview. After I build and ran it went away. Not sure what that was but it worked then.

    However, when I change the view of the tablet in design preview to potrait from landscape the elements dont automaticaly render to this new view.

    Is there any way I can figure out that view changed and then change the user control rendering ?

    Any good sample ?

    Thanks!

    • Marked as answer by Shawn Dan Saturday, March 17, 2012 8:23 PM
    Saturday, March 17, 2012 12:45 AM

All replies

  • Could you elaborate on what you mean ?

    This works as expected when i test the sample. I have 4 rows, and the Sample shows in the second middle row.

    What appearance exactly are you expecting ?


    Developing is part of being a developer.

    Friday, March 16, 2012 11:57 AM
  • As SharpAspirant says, all seems correct when I tested this. The only difference is that I used a Window rather than a Page, but that shouldn't mater, unless your Page is in a Frame or some other container that is causing some undesired effect?

    I did not recognise your namespace declaration format, so I had to fix that too.

    Below is a fully working example in return:

       

    <Window x:Class="WpfApplication79.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525" xmlns:local="clr-namespace:WpfApplication79">
        <Grid ShowGridLines="True" >
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
    
            <local:MyTextControl Grid.Column="1" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"></local:MyTextControl>
    
        </Grid>
    </Window>
    
      
    using System.Windows;
    using System.ComponentModel;
    
    namespace WpfApplication79
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
        }
    }
    
      
        <UserControl
        x:Class="WpfApplication79.MyTextControl"
        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:DesignHeight="300" d:DesignWidth="400"
        xmlns:local="clr-namespace:WpfApplication79">
    
            <Grid>
                <Rectangle></Rectangle>
                <TextBlock FontSize="30" >Sample</TextBlock>
            </Grid>
    
        </UserControl>
      
    using System.Windows.Controls;
    
    namespace WpfApplication79
    {
    	public partial class MyTextControl : UserControl
    	{
            public MyTextControl()
    		{
    			this.InitializeComponent();
    		}
    	}
    }
        

    Start a new WPF project, dump that in and let me know if it works for you.

        

    Regards,
    Pete


    #PEJL

    Friday, March 16, 2012 12:42 PM
  • Thanks guys. When I coded it a yellow exclamation mark started appearing on the design preview. After I build and ran it went away. Not sure what that was but it worked then.

    However, when I change the view of the tablet in design preview to potrait from landscape the elements dont automaticaly render to this new view.

    Is there any way I can figure out that view changed and then change the user control rendering ?

    Any good sample ?

    Thanks!

    • Marked as answer by Shawn Dan Saturday, March 17, 2012 8:23 PM
    Saturday, March 17, 2012 12:45 AM
  • Yes that's as simple as binding window.actualWidth and height to properties that Compare the two and define orientation. You can then use datatriggers to rotatetransform your parent container. I can't post an example right now, but the search button will bring up a great many examples. 

    Good luck,

    Pete

     

    #PEJL


    Saturday, March 17, 2012 1:29 AM
  • Thanks for the help.

    Saturday, March 17, 2012 8:23 PM