locked
How to change the orientation of viewboxes from vertical to horizontal with adjustment

    Question

  • Hi everyone,

    I'm developing windows store apps. there 5 viewbox in my page.Like

    1 2 3

    4 5

    When click the 1st viewbox the alignment should change to

      1

      2

      3

    4  5

    Please help me


    Wednesday, August 20, 2014 12:51 PM

Answers

  • Hi Shaafs,

    Not quite sure what you mean here, but you may use Grid ColumnDefinition and RowDefinition for this scenario.

    Let' say we have the code below, here I use button instead of your viewbox, you could replace it later.

            <Grid x:Name="container" HorizontalAlignment="Left" Height="394" Margin="166,78,0,0" VerticalAlignment="Top" Width="476">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Button x:Name="vb1" Content="ViewBox1" Grid.Column="0" Grid.Row="2" />
                <Button x:Name="vb2" Content="ViewBox2" Grid.Column="1" Grid.Row="2" />
                <Button x:Name="vb3" Content="ViewBox3" Grid.Column="2" Grid.Row="2" />
                <Button x:Name="vb4" Content="ViewBox4" Grid.Column="0" Grid.Row="3" />
                <Button x:Name="vb5" Content="ViewBox5" Grid.Column="1" Grid.Row="3" />
            </Grid>
            <Button Content="Reorder" HorizontalAlignment="Left" Height="76" Margin="778,309,0,0" VerticalAlignment="Top" Width="125" Click="Button_Click"/>
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Grid.SetRow(vb1, 0);
    
                Grid.SetRow(vb2, 1);
                Grid.SetColumn(vb2, 0);
    
                Grid.SetRow(vb3, 2);
                Grid.SetColumn(vb3, 0);
            }

    Let's see what's the difference, before clicking:

    After clicking:

    You may need adjust the position of the viewbox as you need.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, August 21, 2014 7:28 AM
    Moderator
  • Hi Shaafs,

    You may need SetColumnSpan method for your scenario.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, August 25, 2014 7:48 AM
    Moderator

All replies

  • Hi Shaafs,

    Not quite sure what you mean here, but you may use Grid ColumnDefinition and RowDefinition for this scenario.

    Let' say we have the code below, here I use button instead of your viewbox, you could replace it later.

            <Grid x:Name="container" HorizontalAlignment="Left" Height="394" Margin="166,78,0,0" VerticalAlignment="Top" Width="476">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Button x:Name="vb1" Content="ViewBox1" Grid.Column="0" Grid.Row="2" />
                <Button x:Name="vb2" Content="ViewBox2" Grid.Column="1" Grid.Row="2" />
                <Button x:Name="vb3" Content="ViewBox3" Grid.Column="2" Grid.Row="2" />
                <Button x:Name="vb4" Content="ViewBox4" Grid.Column="0" Grid.Row="3" />
                <Button x:Name="vb5" Content="ViewBox5" Grid.Column="1" Grid.Row="3" />
            </Grid>
            <Button Content="Reorder" HorizontalAlignment="Left" Height="76" Margin="778,309,0,0" VerticalAlignment="Top" Width="125" Click="Button_Click"/>
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Grid.SetRow(vb1, 0);
    
                Grid.SetRow(vb2, 1);
                Grid.SetColumn(vb2, 0);
    
                Grid.SetRow(vb3, 2);
                Grid.SetColumn(vb3, 0);
            }

    Let's see what's the difference, before clicking:

    After clicking:

    You may need adjust the position of the viewbox as you need.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, August 21, 2014 7:28 AM
    Moderator
  • hi jamles,

             Thanks for your response. I want to place last 2 viewbox in same column. that is to adjust in same column like 

    to like thisi did that row wise. But struggling in last row for adjust 2 controls in same column pls help me

    Thursday, August 21, 2014 1:07 PM
  • Hi Shaafs,

    You may need SetColumnSpan method for your scenario.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, August 25, 2014 7:48 AM
    Moderator