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:-
<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..