Develop Reference

WPF text overlay grid - c#

I've searched whole stackoverflow and can't find simple solution to solve my problem.
I have grid and I want to overlay whole grid by some text/image. Do you have any ideas how can I do it?
Actually it is tetris game and I would like to show user text/image "Game Over" after he lose, so I need to do it manually from c#. Any ideas ?
Thanks for any help :-)
<Window x:Class="TetrisWPF.MainWindow"
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:local="clr-namespace:TetrisWPF"
mc:Ignorable="d"
Title="MainWindow"
AllowsTransparency="True"
ResizeMode="CanResizeWithGrip"
WindowStyle="None"
ShowInTaskbar="True"
WindowState="Maximized"
KeyDown="HandleKeyDown"
Initialized="MainWindow_Initilized" Background="#222222">
<Window.Resources>
<FontFamily x:Key="FontAwesome">/Fonts/fontawesome-webfont.ttf#FontAwesome</FontFamily>
</Window.Resources>
<DockPanel LastChildFill="false">
<Button DockPanel.Dock="Right" Visibility="Hidden" Width="300">Right</Button>
<StackPanel DockPanel.Dock="Right" Width="311" >
<Button x:Name="btnPlay" Content="Play" Click="btnPlay_Click" Width="50" Height="25" Margin="5"/>
<Label Content="Score " Height="56" x:Name="Score" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>
<Label Content="Lines " Height="56" x:Name="Lines" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>
<Label Content="Level 1" Height="56" x:Name="level" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0" />
<Button x:Name="buttonPlay" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Image Name="img1" Source="C:\Users\xx\Pictures\btn.png" />
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="buttonPause" Content="Pause (L1)" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonPause_Click" />
<Button x:Name="buttonRestart" Content="Restart" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonRestart_Click" />
<Button x:Name="buttonStop" Content="Stop" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonStop_Click" />
<Button x:Name="buttonDemo" Content="Demo" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonDemo_Click" />
<Button x:Name="buttonExit" Content="Exit" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonExit_Click" />
<TextBlock x:Name="GameOverText" Height="56" FontSize="28" FontWeight="Bold" TextWrapping="Wrap" Text="Game Over" Foreground="#FFD41A1A"/>
<TextBlock x:Name="GamePausedText" Height="56" FontSize="28" FontWeight="Bold" TextWrapping="Wrap" Text="Game Paused" Foreground="#FF0D15B6" Margin="0,0,-0.8,0"/>
</StackPanel>
<Grid Name="MainGrid" Height="750" Width="375" DockPanel.Dock="Right">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
</DockPanel>

With a grid, you can simply add objects occupying the same space and they will overlap in the order you've added them. With your example, you've got a lot of columns and rows, so to overlay something over all of them you'd have to set it's RowSpan and ColumnSpan to the number of rows/columns you have for it to fill all the space.
An easier way might be to put your grid in another grid (with only 1 row and column), and add something to that (this is what I do when I want to overlay components, just stick them in their own little 1x1 grid).
Like this:
<Grid>
<Grid Name="MainGrid" Height="750" Width="375" DockPanel.Dock="Right">
... all those columns
</Grid>
<Border Name="GameOverlay" Background="Black" Visibility="Hidden">
<TextBlock Text="Game Over!" Foreground="White" FontWeight="Bold"
FontSize="24"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</Grid>
Note, it's important to set a background to something if you want to obscure your original content (though a half-transparent background might look cool!).
To show and hide it in the code, simply show & hide it with GameOverlay.Visibility = Visibility.Visible or GameOverlay.Visibility = Visibility.Hidden, or bind this to a property that you can change.
This way you can make it look how you want, place it where you want, with it set to Visible in the designer, then change it to Hidden (so you can make it visible in the code).
Much easier than constructing it in code when you need it and manually adding it to the UX.

Related

I am trying to create a grid in XAML by the following:
GRID Type
I tried something like this but I have no ideea how to add the red squares.
Do I have to make a grid in grid?
Right now, I have this code
<Window x:Class="MonitorComenzi.MainWindow"
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:local="clr-namespace:MonitorComenzi"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Black">Comenzi plasate</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Green">Comenzi preparate</TextBlock>
</Grid>
</Window>

You can make nested Grids, its absolutly fine, but a single StackPanel do the trick as well. Something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Black">Comenzi plasate</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Green">Comenzi preparate</TextBlock>
<StackPanel Orientation="Horizontal"
Margin="10"
Grid.Row="1"
Grid.Column="0">
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
</StackPanel>
</Grid>

Here is the code that I'm working with and an image which shows the result. This final product has the look that I'm going for, but I think that there must be a better way to do this.
<Page
x:Class="UIFollowAlong.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIFollowAlong"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Style TargetType="Rectangle"
x:Key="ColorButton">
<Setter Property="Margin" Value="5"/>
<Setter Property="RadiusX" Value="50"/>
<Setter Property="RadiusY" Value="50"/>
</Style>
</Page.Resources>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="RedButton"
Grid.Row="0"
Grid.Column="0"
Fill="Red"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="YellowButton"
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="GreenButton"
Grid.Row="1"
Grid.Column="0"
Fill="Green"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="BlueButton"
Grid.Row="1"
Grid.Column="1"
Fill="Blue"
Style="{StaticResource ColorButton}"/>
<Ellipse x:Name="CenterDot"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
The code in particular that I'm asking the question about is the Ellipse.
<Ellipse x:Name="CenterDot"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
How can I align the ellipse to the center while ignoring the row and column definitions of the grid? By default, the ellipse goes to 0,0 and gets placed on top of the red rectangle in the top-most left-most grid position.
I tried to place within the page, rather than within the grid, but I think the page can only have one content property?
The picture I showed is exactly the result I wanted I'm just wondering if there is an alternative way to achieve this that does involve spanning multiple row and column definitions.
Thanks!

To have have multiple layers over the same area introduce one more Grid:
<Grid>
<!--layer 0-->
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="RedButton"
Grid.Row="0"
Grid.Column="0"
Fill="Red"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="YellowButton"
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="GreenButton"
Grid.Row="1"
Grid.Column="0"
Fill="Green"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="BlueButton"
Grid.Row="1"
Grid.Column="1"
Fill="Blue"
Style="{StaticResource ColorButton}"/>
</Grid>
<!--layer 1, covers layer 0-->
<Ellipse x:Name="CenterDot"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
Grid with White background and Ellipse are positioned in the same cell of the outer Grid.
To see how Ellipse can cover Rectangles - increase Ellipse size (Height/Width)

Hi I divided the mobile screen into three rows and second row into two columns. I am trying to add Images to second column of the second row. Though I specify Grid.Row and Grid.Column to the image properties it does not work. Could you please guide me on how to add widgets to different rows and columns.
Your help much apprecated.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
<Image
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="100"
Height="100"
Grid.Row="0"
Source="Assets/b_placeholder.jpg"/>
<Image
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="100"
Height="100"
Grid.Row="2"
Source="Assets/b_placeholder.jpg"/>
<Image
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="100"
Height="100"
Grid.Row="1"
Grid.Column="1"
Source="Assets/b_placeholder.jpg"/>
</Grid>

You cannot define columns only within one row.
Either you create a new grid within that row with only columns:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="100"
Height="100"
Grid.Row="0"
Source="Assets/b_placeholder.jpg"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="100"
Height="100"
Grid.Column="1"
Source="Assets/b_placeholder.jpg"/>
</Grid>
<Image
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="100"
Height="100"
Grid.Row="2"
Source="Assets/b_placeholder.jpg"/>
</Grid>
or you deal with columnspan on the 1st and 3rd images:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="100"
Height="100"
Grid.Row="0"
Grid.ColumnSpan="2"
Source="Assets/b_placeholder.jpg"/>
<Image
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="100"
Height="100"
Grid.Row="1"
Grid.Column="1"
Source="Assets/b_placeholder.jpg"/>
<Image
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="100"
Height="100"
Grid.Row="2"
Grid.ColumnSpan="2"
Source="Assets/b_placeholder.jpg"/>
</Grid>

I have a user control(Windows 8.1 app) which I have developed using PATH vector control. I have put it inside a ViewBox . The problem is , when I change the screen resolution or even orientation , the Control either get reduced or get too much big.
I want to give it a fixed size so whatever the screen resolution is or orientation is, It shouldnt increase the size .
The XAML for my user control is
<UserControl
x:Class="controlMagnifier.MagnifierUsercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:controlMagnifier"
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="200">
<Canvas x:Name="controlCanvas" x:FieldModifier="public" >
<Canvas.RenderTransform>
<RotateTransform>
</RotateTransform>
</Canvas.RenderTransform>
<Grid Height="250" Width="176" Canvas.Left="23" Canvas.Top="40" >
<Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,20,13,90">
<Border.Background>
<ImageBrush x:FieldModifier="public" x:Name="image1" />
</Border.Background>
</Border>
<TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red" FontSize="20" Text="ABC" TextAlignment="Center" />
<!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
<Path x:Name="MagnifyTip" Data="m 422.67516,254.62099 c -54.00107,0 -97.94018,-42.99659 -97.94018,-95.82439 0,-52.83449 43.93911,-95.824384 97.94018,-95.824384 53.98741,0 97.93335,42.989894 97.93335,95.824384 0,52.8278 -43.94594,95.82439 -97.93335,95.82439 z m -4.5e-4,-201.388003 c -59.74605,0 -108.33864,48.616303 -108.33864,108.338643 0,56.09938 81.0924,116.80009 104.5378,191.74948 0.50401,1.61877 2.01605,2.72166 3.71189,2.7098 1.70178,-0.0237 3.1901,-1.13847 3.67039,-2.76909 C 449.00187,276.46834 531.00741,217.73624 531.01334,161.55977 531.00741,101.84929 482.4089,53.232987 422.67471,53.232987 Z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
</Grid>
</Canvas>
</UserControl>

If the only thing in the Viewbox is your user control, just get rid of the Viewbox, it stretches and scales the content by design!
If you have various controls in your Viewbox but you you only want some of them to resize, you might be better changing your layout to use a grid and only wrapping the stuff you want to resize in a Viewbox.
Here is an example of a 3x3 grid with 6 textboxes, 5 fixes size, 1 dynamic (in a Viewbox):
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="0" Grid.Column="1" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="0" Grid.Column="2" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="1" Grid.Column="0" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="2" Grid.Column="0" Text="Fixed Size"></TextBox>
<Viewbox Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<TextBox Text="Dynamic"/>
</Viewbox>
</Grid>

I'm trying to put a <Border/> around a <Grid/> in a page, however the border appears to be bordering the page rather than the grid.
This is only XAML in my page element.
<Border Background="Black">
<Grid Background="{ThemeResource ControlBackgroundBrush}" x:Name="LoginCredentials" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="Username:" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Center" Grid.Row="0" HorizontalAlignment="Right" Margin="5"/>
<TextBox x:Name="UserName" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" Text="" Grid.Row="0" Grid.Column="1" TextChanged="UserChange" Margin="5"/>
<Button x:Name="LoginButton" Content="Login" Click="LoginButton_Click" Grid.Row="2" HorizontalAlignment="Right" Margin="5" TabIndex="0"/>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Grid.Row="2" Grid.Column="1" />
</Grid>
</Border>
As a test I created a resource to fill the background of the <Grid/> with a colour and also filled the background of the <Border/> with a different colour. The <Grid/> ends up as a box in the center of the screen as intended, but the border <Border/> fills the entire screen. Can anyone tell me why this happens and how to get the <Border/> to fit around the <Grid/> as I want?

Got it!
<Border Background="Black" VerticalAlignment="Center" HorizontalAlignment="Center">
....
</Border>
As soon as i posted the question, what i was missing became clear!