Click here to Skip to main content
15,905,148 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

How bring a grid to front? I have 5 grid(gd_1,gd_2....gd_5) and a rectangle(rec_dim) on top of the grids. I'm doing animation when user click on the each grid, it will dim the screen using rec_dim and maximize selected grid to view full page image but on top of rec_dim. So the other 4 grids will stay behind rec_dim. How to do this in code?

EDITED:
My xaml as below:-
XML
<Grid x:Name="gd_GF" HorizontalAlignment="Left" Height="289.35" Margin="38,0,0,209.82" VerticalAlignment="Bottom" Width="500" RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Grid.RenderTransform>
    <Rectangle Margin="0,0,0,49.35">
        <Rectangle.Fill>
            <ImageBrush ImageSource="/Images/Floor_GF.png" />
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Margin="161,0,138.69,0" TextWrapping="Wrap" Text="Ground Floor" VerticalAlignment="Bottom" Foreground="White" FontSize="32" FontFamily="/Fonts/#Century Gothic" TextAlignment="Center" FontWeight="Bold" d:LayoutOverrides="Width"/>
</Grid>
<Grid x:Name="gd_LG" HorizontalAlignment="Left" Height="289.35" Margin="548.751,0,0,209.82" VerticalAlignment="Bottom" Width="500" RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Grid.RenderTransform>
    <Rectangle Height="240" Margin="0,0,0,49.35" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="500">
        <Rectangle.Fill>
            <ImageBrush ImageSource="/Images/Floor_LG.png" />
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Margin="0,0,67.628,0" TextWrapping="Wrap" Text="Lower Ground Floor" VerticalAlignment="Bottom" Foreground="White" FontSize="32" FontFamily="/Fonts/#Century Gothic" TextAlignment="Center" HorizontalAlignment="Right" FontWeight="Bold"/>
</Grid>
<Grid x:Name="gd_1F" HorizontalAlignment="Left" Height="287.85" Margin="38,0,0,541.32" VerticalAlignment="Bottom" Width="500">
    <Rectangle Margin="0,0,0,47.85">
        <Rectangle.Fill>
            <ImageBrush ImageSource="/Images/Floor_1F.png" />
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Margin="0,0,191.377,0" TextWrapping="Wrap" Text="1st Floor" VerticalAlignment="Bottom" Foreground="White" FontSize="32" FontFamily="/Fonts/#Century Gothic" TextAlignment="Center" HorizontalAlignment="Right" FontWeight="Bold"/>
</Grid>
<Grid x:Name="gd_2F" HorizontalAlignment="Right" Height="287.85" Margin="0,0,31.249,541.32" VerticalAlignment="Bottom" Width="500" d:IsHidden="True">
    <Rectangle Height="240" Margin="0,0,0,47.85" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="500">
        <Rectangle.Fill>
            <ImageBrush ImageSource="/Images/Floor_2F.png" />
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Margin="0,0,159.628,0" TextWrapping="Wrap" Text="2nd Floor" VerticalAlignment="Bottom" Foreground="White" FontSize="32" FontFamily="/Fonts/#Century Gothic" TextAlignment="Center" HorizontalAlignment="Right" FontWeight="Bold"/>
</Grid>
<Grid x:Name="gd_3F" HorizontalAlignment="Left" Margin="38,758.83,0,868.32" Width="500" d:IsHidden="True">
    <Rectangle Margin="0,0,0,52.85" Height="240">
        <Rectangle.Fill>
            <ImageBrush ImageSource="/Images/Floor_3F.png" />
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Margin="0,0,186.997,0" TextWrapping="Wrap" Text="3rd Floor" VerticalAlignment="Bottom" Foreground="White" FontSize="32" FontFamily="/Fonts/#Century Gothic" TextAlignment="Center" HorizontalAlignment="Right" FontWeight="Bold"/>
</Grid>
<Grid x:Name="gd_4F" HorizontalAlignment="Right" Margin="0,763.83,31.249,868.32" Width="500" d:IsHidden="True">
    <Rectangle Height="240" Margin="0,0,0,47.85" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="500">
        <Rectangle.Fill>
            <ImageBrush ImageSource="/Images/Floor_4F.png" />
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Margin="0,0,159.628,0" TextWrapping="Wrap" Text="4th Floor" VerticalAlignment="Bottom" Foreground="White" FontSize="32" FontFamily="/Fonts/#Century Gothic" TextAlignment="Center" HorizontalAlignment="Right" FontWeight="Bold"/>
</Grid>
<Grid x:Name="gd_5F" Height="291.733" Margin="261.751,432.83,318.249,0" VerticalAlignment="Top" d:IsHidden="True">
    <Rectangle Height="240" Margin="0,0,0,51.733" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="500">
        <Rectangle.Fill>
            <ImageBrush ImageSource="/Images/Floor_5F.png" />
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Margin="181.968,0,134.628,-0.001" TextWrapping="Wrap" Text="5th Floor" VerticalAlignment="Bottom" Foreground="White" FontSize="32" FontFamily="/SunwayPutraApp;component/Fonts/#Century Gothic" TextAlignment="Center" FontWeight="Bold"/>
</Grid>
<Rectangle x:Name="rec_dim" Height="1920" HorizontalAlignment="Left" Stroke="{x:Null}" VerticalAlignment="Top" Width="1080.001" Margin="-1080.001,0,0,0" RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="HorizontalAlignment">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Rectangle.RenderTransform>
    <Rectangle.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#CC000000" Offset="0.745"/>
            <GradientStop Color="#33000000"/>
            <GradientStop Color="#95000000" Offset="0.295"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>


The rec_dim will fill the whole screen and I maximize the grid to fit the screen using animation. The screen will focus only selected grid eg: user press LG, it will bring the LG to max, if 1F, it will being 1F to max..
Posted
Updated 16-Apr-15 17:35pm
v3
Comments
Sergey Alexandrovich Kryukov 16-Apr-15 22:57pm    
Not clear. What is the logical tree for those UI elements? First of all, what is the parent of the grid and the rectangles? Can you illustrate it on possibly minimal code sample?
—SA
Luiey Ichigo 16-Apr-15 23:37pm    
already edit.all the control is locate under main layout when creating a new page/window
Sergey Alexandrovich Kryukov 17-Apr-15 1:10am    
Aha. I don't really understand why using grid without column or row definitions, but at least I understand why elements overlap...
—SA
Kenneth Haugland 17-Apr-15 0:33am    
You normally bring things to the front using the Z-index.
Luiey Ichigo 17-Apr-15 0:38am    
like this? http://wpf.2000things.com/tag/zindex/

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900