We Keep Coding

Why is the window re-scaling/shrinking in output when no resize and size constraints are in place?

I'm just new and messing around with the WPF C#.
I noticed that the design view and have some minor differences. Most noticeable at the button.
Design View:
Ouput # 1:
Ouput # 2:
It seems that the window/container is resizing/shrinking even when both min and max width's and height's were set with fixed values and resize mode is set to NoResize.
I could easily deal with some of the controls by setting up the vertical and horizontal alignments since the adjustments are not too noticeable, but for the Add button the differences are noticeable from the supposed output.
I did try setting the min size of the button so that it would not be affected by the resizing and there would still be space for the margins but the button properly renders only a part of it. (please see output 1)
The only compromise that I could is to set both vertical and horizontal alignment to stretch and not put any size constraints on the button but the button would end up shrinking from its original size. (please see output 2)
Here's the XAML for the window.
<Window x:Class="Game_Viewer.NewApp"
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:Game_Viewer"
mc:Ignorable="d"
Title="Add New Program" Height="155" Width="250" ResizeMode="NoResize" Background="#FF515151" WindowStyle="ToolWindow" WindowStartupLocation="CenterScreen" MinHeight="155" MinWidth="250">
<Grid Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Image x:Name="appicon_img" Margin="10,10,0,0" Source="Resources/menu_bg.png" Stretch="Fill" Height="35" VerticalAlignment="Top" HorizontalAlignment="Left" Width="35" Grid.ColumnSpan="2"/>
<TextBox x:Name="apppath_txtbox" HorizontalAlignment="Left" Margin="10,55,0,0" Width="154" Foreground="White" Background="#FF6E6E6E" Text="Program Path" VerticalContentAlignment="Center" BorderBrush="#FF707070" MaxLines="1" Height="25" VerticalAlignment="Top" FontSize="10" Grid.ColumnSpan="2"/>
<Button Content="Search" Margin="169,55,10,0" Click="BrowseApp_Click" Foreground="White" Background="#FF515151" FontWeight="Medium" Height="25" VerticalAlignment="Top" FontSize="10" Grid.ColumnSpan="2"/>
<Button x:Name="add_btn" Content="Add Program" Margin="72,89,72,8" Foreground="White" Background="#FF515151" Click="AddProgram_Click" FontWeight="Medium" Grid.ColumnSpan="2" MinHeight="30" MinWidth="100"/>
<TextBox x:Name="appname_txtbox" Margin="50,10,10,0" TextWrapping="WrapWithOverflow" Foreground="White" Text="Program Name" MaxLines="1" IsUndoEnabled="True" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="#FF707070" FontWeight="Medium" Background="#FF6E6E6E" Height="35" VerticalAlignment="Top" Grid.ColumnSpan="2"/>
</Grid>
</Window>
I would like to know a solution or round-about for this kind of issue.
It's not really a problem having this issue as it is only aesthetic but I would at least know the reason why this is happening. And could you refer me to good tutorials for wpf using c#.
Thanks in advance and have a wonderful day!

C# UWP buttons not align the way I wanted

I have created a button next to my "Start" button. In my xaml page, the button appears at where I want it to be.
However, when I run the app, it appears at a random location.
how do I fix this ?
StackPanel>
<TextBlock Text="Description:" Style="{StaticResource SampleHeaderTextStyle}"/>
<TextBlock Style="{StaticResource ScenarioDescriptionTextStyle}" Text="This page is where your exercise starts " FontSize="20"/>
<TextBlock TextWrapping="Wrap" Margin="0,20,0,0" FontSize="20">
Follow the instruction and press "Start" to begin the exercise.
</TextBlock>
<TextBlock TextWrapping="Wrap" Margin="0,0,0,0" FontSize="15">
(Ensure the connected BLE device is working before starting the exercise.)
</TextBlock>
<TextBlock x:Name="txtClock" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="20"/>
<Button x:Name="btnStart" Content="Start" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Height="38" Width="106" Click="btnStart_Click_1"/>
<TextBlock x:Name="txtExercise" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
<TextBlock x:Name="txtAngle" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
<TextBlock x:Name="txtDisplay" TextWrapping="Wrap" Margin="0,10,0,0"/>
<TextBlock x:Name="txtAgain" Text="" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
<Button x:Name="btnRefresh" Content="Refresh" HorizontalAlignment="Left" VerticalAlignment="Top" Height="38" Width="106" Margin="150,-158,0,0" Click="btnRefresh_Click"/>

Since you are using the Margin-Property of the button it makes sense that it will pop up somewhere else.
To be honest I don't really know why but I had the same problems.
I would advise you to either use a RelativePanel a StackPanel or a Grid.
You can have a read on this microsoft page. To find out more about the difference between the various types.
A grid would look something like this:
(Keep in mind a grid is 0 indexed)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/> //For a Row of 100 units height
<RowDefinition Height="*"/> //For a Row which fills the rest of the available screen space
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/> //For a column of 100 units width
<ColumnDefinition Width="*"/> //For a column which fills the rest of the screen
</Grid.ColumnDefinitions>
<Button x:Name="Button1" Grid.Row="0" Grid.Column="0" />
<Button x:Name="Button2" Grid.Row="1" Grid.Column="1" />
</Grid>
A Stackpanel would look like this:
(A thing to keep in mind here is that a Stackpanel will not resize its elements when the screen/window size changes)
<Stackpanel Orientation="horizontal">
<Button x:Name="Button1"/>
<Button x:Name="Button2"/>
</Stackpanel>

UWP app is not scaling

I'm trying to make text editor for Windows (PC) in UWP but the scaling is not working, I've done the same in WPF and it worked.
The page size is set to 800x600, these are columns:
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="filename" Margin="10" Grid.ColumnSpan="2">Untitled</TextBlock>
<Border Margin="5" Grid.Row="1">
<TextBox x:Name="text" AcceptsReturn="True"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Visible" TextChanged="text_TextChanged"/>
</Border>
<StackPanel Grid.Row="2" Margin="3,3" Orientation="Horizontal" MinHeight="31" >
<Button x:Name="saveButton" FontSize="15" Content="Save" Margin="0,0,0,-0.125" VerticalAlignment="Top" Click="saveButton_Click" />
<Button x:Name="button" Content="Save as..." Margin="5,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="button_Click" />
<Button x:Name="loadButton" FontSize="15" Content="Read" Margin="5,0" VerticalAlignment="Bottom" Click="loadButton_Click"/>
</StackPanel>
</Grid>
Title is in 1st row, content is in 2nd, buttons (save, load) are in 3rd, it looks like grid it wouldn't exist:
That's with normal size
After size change
How do I fix it?

The page size is set to 800x600
If you've set the page size to 800x600 like this: <Page Width="800" Height="600"... it will always be 800x600 and it will not scale. If you want it to scale properly, just don't set these properties.
I assume you wanted to set the size of the app when it starts for the first time. You can approach it by setting the ApplicationView.PreferredLaunchViewSize.
Also I recommend to use the RichEditBox to display and edit text files.

Force Size on a Viewbox's Children

So I have a rather interesting question. I have a viewbox that has a few elements in it (a custom user control for an image, a canvas, a label, and a textbox). What I want is to try and have all elements scale with the viewbox, but I want the label and the textbox to have a "Max Size." I have tried using a max width and height on these controls but they seem to ignore it. If someone could take a look at my code below an slap me for what I am doing wrong that would be appreciated.
<Viewbox Name="myViewBox" Stretch="Uniform">
<!--Grid used to track mouse movements in this element for other reasons -->
<Grid Name="grdViewboxGrid" MouseMove="trackMouse">
<Canvas Name="cvsViewboxCanvas" MinWidth="270" MinHeight="270"
VerticalAlignment="Top" HorizontalAlignment="Center"
Panel.ZIndex="1" Background="Black"
MouseUp="Canvas_MouseUp"
MouseMove="Canvas_MouseMove">
<Grid>
<!--Would rather not post here for Intellectual Property reasons-->
<!-- Extension of the image control -->
<CustomImageUserControl />
<Grid>
<Grid Width="{Binding LabelWidthPercentage}"
MaxWidth="50"
Height="{Binding LabelHeightPercentage"
MaxHeight="26"
SnapsToDevicePixels="True" VerticalAlignment="Top"
HorizontalAlignment="Left" Margin="5" IsHitTestVisible="False">
<Label Name="lblViewboxLabel" HorizontalAlignment="Left"
Padding="5,5,5,0" Margin="0,5,0,0"
Style="{x:Null}"
Content="{Binding lblContent}" />
</Grid>
<Grid>
<Grid Width="{Binding TextBoxWidthPercentage}"
MaxWidth="156"
Height="{Binding TextBoxHeightPercentage}"
MaxHeight="45"
SnapsToDevicePixels="True" Vertical="Top"
HorizontalAlignment="Right" Margin="5" IsHitTestVisible="False">
<Border Style="{DynamicResource CustomBorder}" />
<Grid>
<Textbox Name="txtViewboxTextBox" Text="{Binding txtViewbox}" />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Canvas>
</Grid>
</Viewbox>
If I am not including something that is needed please let me know and I will update my question. Any help would be greatly appreciated this is now day 4 on this issue sadly :-(

I am not sure why you need so many overlapping Grids, but I hope that I can answer your question nevertheless:
In order to have the label left of the text box and to assign a maximum width to each of these two controls, use a Grid with two columns and set the MaxWidth property for each column. Then, assign the label to the left column (the one with index 0) and assign the text box to the right column (index 1). The corresponding code fragment looks like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="30"/>
<ColumnDefinition MaxWidth="156" MinWidth="30"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" x:Name="lblViewboxLabel" HorizontalAlignment="Left" Foreground="Yellow"
Padding="5,5,5,0" Margin="0,5,0,0"
Style="{x:Null}"
Content="{Binding lblContent}" />
<TextBox Grid.Column="1" x:Name="txtViewboxTextBox" Text="{Binding txtViewbox}" Background="Orange"/>
</Grid>
I also have assigned a MinWidth to the right column; this is necessary to make sure that the text box does not completely disappear if it contains no text.

WPF Layout Problems

I cant figure out what I am doing wrong I have a grid with 2 columns and 3 rows. In the left column I have a textblock and textbox and a listbox which is all good.
The right column gets a little more complicated where I have a tabcontrol to start. Then my TabItem and inside that I have my Main Grid and then inside that I have 2 grids. Which are grdDetailsTop and then grdDetailsBottom.
grdDetailsTop has 3 columns where the left will be an image with a Border the middle should be Member Code: 'TextBox' and under that should be Family Code: 'TextBox' and then finally under that I would like to place Balance: 'TextBox'
The way I tried it was, I have grdDetailsTop Grid with 3 columns in the first column I placed a groupbox and inside that I have a stackpanel.
Second Column is where I am having trouble I placed a Stackpanel with the orientation Horizontal and grid.Column="1" but my textblocks are going into the 3rd column without me telling them too. Sorry for the bad explanation but the code is posted hopefully you can help. Also the reason for my different Panels is so I can place a border around each column of the grdDetailsTop.
Thanks
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"></ColumnDefinition>
<ColumnDefinition Width="70*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="100*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="Search Member" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
<TextBlock Text="Member Details" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
<TextBox Name="txtMEMSearch" Background="Orange" Grid.Column="0" Grid.Row="1"></TextBox>
<ListBox Name="lstSearchMembers" Grid.Row="2"
BorderBrush="Black" DisplayMemberPath="Name"
ItemsSource="{Binding ElementName=bindingToObject,
Path=Clients}" />
<TabControl Name="mainTabControl" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Margin="5">
<TabItem Header="Member Details" Name="memDetailTab">
<Grid Name="mainTabGrid">
<Grid Name="grdDetailsTop" Height="175" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GroupBox Header="Picture">
<StackPanel>
<Image Height="125" Width="125"></Image>
</StackPanel>
</GroupBox>
*************PROBLEM AREA******************
<StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
<TextBlock
VerticalAlignment="Top"
Margin="5"
Height="25">Member Code:</TextBlock>
<TextBlock
VerticalAlignment="Top"
Margin="5"
Width="75"
Height="25"></TextBlock>
<TextBlock
Margin="5"
Height="25"
Width="100">Family Code:</TextBlock>
<TextBlock
Margin="5"
Width="75"
Height="25"></TextBlock>
<TextBlock
VerticalAlignment="Bottom"
Margin="5"
Height="25"
Width="100">Balance Due:</TextBlock>
<TextBlock
Margin="5"
VerticalAlignment="Bottom"
Width="75"
Height="25"></TextBlock>
</StackPanel>
******************************************
</Grid>
<Grid Name="grdDetailsBottom">
</Grid>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Page>

You're missing the VerticalAlignment = "Top" on that TextBlock, and therefore, it is defaulting to Stretch which will center the text in the available vertical space. If you set that property, you'll see that it moves back up to be in line with the other TextBoxes in the same StackPanel.
It isn't actually moving that TextBox into the next column, rather, you've defined a fixed width of the column it is in (in this case, column 1 with a width of 200). But the contents of that column (the StackPanel are more than 200 units wide, so they push over into the next grid column. To keep all the TextBoxes in column 1, you'll either need to widen the column so they can fit, shrink the size of the TextBoxes or set the width Auto so it will automatically size itself to its contents. If you look at it, you're taking up 175 units with TextBlocks 2 and 3, leaving only 25 units for the rest of the TextBlocks in that StackPanel. There's just not enough space.
<StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
<TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
... other text boxes ...
</StackPanel>
This will fix the vertical layout issue, but not the Horizontal layout issue. That requires changes to the grid column sizing or the size of the contents.
Per your comment below, I believe you're looking for the WrapPanel which will automatically wrap items to the next line (horizontal or vertical) when it runs out of space.
<WrapPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
<TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
... other text boxes ...
</WrapPanel>
This layout certainly looks nicer. But - I don't know your specific requirements, however rather than using a WrapPanel with fixed margins and sizes, I would recommend using a Grid with ColumnDefinitions and RowDefinitions to organize items in this type of layout. The Grid offers a much greater level of flexibility and allows for items to automatically resize based on system font sizes, a user resizing your view and other factors out of your control. If you are setting fixed heights/widths, you lose that flexibility. Again, I don't know you're requirements, so perhaps this is the best solution for you, but under most circumstances, I'd highly recommend a Grid instead.