Misaligned button after compilation - c#

I was creating a simple interface for my app. All went well when I prepared the GUI design, I'm using WPF and its XAML implementations. Problem came up after everything compiled very well and the app's running. There's this one button that goes misaligned when the app's running. I looked for the problem and found nothing. Any idea on how to fix this?
Expected result is on the left, the real result is on floating window. The XAML code of the misaligned button is below the floating window.


<Window x:Class="WPFAlignment.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="3"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3"/>
</Style>
</Grid.Resources>
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="LoadFingerPrint"/>
<Button Grid.Column="1" Content="Load File"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="File Path:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Row="1"
Text="Key Size:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Row="2"
Text="Initial Vector:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<DockPanel LastChildFill="True" Grid.Column="1" Grid.ColumnSpan="3">
<TextBox Margin="2"/>
</DockPanel>
<Grid Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="1"
VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Content="128bit"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<CheckBox Grid.Column="1"
Content="192bit"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<CheckBox Grid.Column="2"
Content="256bit"
VerticalAlignment="Center"
HorizontalAlignment="Right"/>
</Grid>
<DockPanel LastChildFill="True"
Grid.Column="1"
Grid.Row="2"
Grid.ColumnSpan="3">
<TextBox Margin="2"/>
</DockPanel>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="Encrypt"/>
<Button Grid.Column="1"
Content="Decrypt"/>
<Button Grid.Column="2"
Content="Abort"/>
</Grid>
</Grid>
</Grid>
Can you try this and see the alignment? You have all those margins set by hand there.. i think that's the issue.
Basically, for positioning use containers : Grid, DockPanel, StackPanel and so on and to be relative inside them, use Alignments as in the example, VerticalAlignment.
Also, in order to set some common value for many Controls use Styles, like i did with the Margin of the Button.

Related

C#/.xaml Having problem with WPF pages, grid vertical expansion

So here's my problem, when I expand the main window the pages presenter frame seems to expand too but only horizontaly. (see photo #1) The 5 buttons on the bottom stay at the original resolution position verticaly but expand horizontaly, I've put them between stars related columns and rows. It worked well for my wlecome pages an this methos seems to work horizontaly. I'm wonderind if the problem comes from previoulsy setuped proprieties. Problem is related to fifthline but can be post problems.
Images
====================================
Original size see 2 border buttons
Expanded window
Grid setup
Expand working on homepage *Grid setup
====================================
<Border Padding="1">
<StackPanel>
<!---FirstLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="445"/>
<ColumnDefinition Width="365"/>
<ColumnDefinition Width="390"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
</Grid.RowDefinitions>
<TextBlock Text="Prénom" Margin="30,5,165,0" Grid.Column="0" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxPrenom" Text="Jean" Margin="100,-1,5,1" Padding="0,5" FontSize="12"/>
<TextBlock Text="Nom" Margin="5,4,245,1" Grid.Column="1" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxNom" Text="Dujardins" Margin="60,-1,0,1" Grid.Column="1" Padding="0,5"/>
</Grid>
<!---SecondLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="433"/>
<ColumnDefinition Width="472"/>
<ColumnDefinition Width="275"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="46"/>
</Grid.RowDefinitions>
<TextBlock Text="Ville" Margin="30,20,0,0" Grid.Column="0" FontWeight="Black"/>
<ComboBox Name="ClientPage_ComboVille" Margin="100,20,0,0" Padding="0,5" FontSize="12"/>
<CheckBox Name="ClientPage_CehckResponsable" Content="Responsable" Margin="10,25,361,0" Grid.Column="1" FontWeight="Medium"/>
</Grid>
<!---ThirdLine-->
<Grid Height="79">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="393"/>
<ColumnDefinition Width="787"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="74"/>
</Grid.RowDefinitions>
<TextBlock Text="Membre depuis:" Margin="30,50,0,0" Grid.Column="0"/>
<DatePicker Name="ClientPage_DatepickDatedebut" Text="Membre depuis:" Margin="130,50,770,0" Grid.ColumnSpan="2"/>
</Grid>
<!---FourthLine-->
<Grid Height="191">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="217"/>
<ColumnDefinition Width="373"/>
<ColumnDefinition Width="590"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="191"/>
</Grid.RowDefinitions>
<GroupBox Name="ClientPage_GroupExp" Header="Années d'expériences" Margin="14,12,6,8" Grid.Column="0">
<StackPanel Margin="0,0,-2,0">
<RadioButton Content="Moins d'un an" Margin="50,10,0,10"/>
<RadioButton Content="1 à 4 ans" Margin="50,10,0,10"/>
<RadioButton Content="5 à 9 ans" Margin="50,10,0,10"/>
<RadioButton Content="10 ans et plus" Margin="50,10,0,10"/>
</StackPanel>
</GroupBox>
<ListBox Name="ClientPage_List" Margin="26,22,144,8" Grid.Column="1"/>
<Button x:Name="ClientPage_Buttonnouveau_Copy1" Content="OriginalFrame
Top right" Grid.Column="2" Margin="471,-150,-1,287" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<Button x:Name="ClientPage_Buttonnouveau_Copy" Content="OriginalFrame
Bottom Left" Margin="3,617,94,-480" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<!---FifthLine-->
</Grid>
<Grid Height="484">
<Grid.RowDefinitions>
<RowDefinition Height="149*"/>
<RowDefinition Height="227*"/>
<RowDefinition Height="45"/>
<RowDefinition Height="63*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="433*"/>
<ColumnDefinition Width="251*"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button x:Name="ClientPage_Buttoneffacer" Content="Effacer" Grid.Row="2" Grid.Column="0" Margin="0,0,2,4" IsEnabled="False"/>
<Button x:Name="ClientPage_Buttonprecedent" Content="<--" Grid.Row="2" Grid.Column="3" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonesuivant" Content="-->" Grid.Row="2" Grid.Column="4" Margin="0,0,1,4" />
<Button x:Name="ClientPage_Buttonajouter" Content="Ajouter" Grid.Row="2" Grid.Column="6" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonnouveau" Content="Nouveau" Grid.Row="2" Grid.Column="7" Margin="0,0,0,4" />
</Grid>
</StackPanel>
</Border>

The main problem you have is that you're using a StackPanel for your root layout panel. This is preventing your layout from expanding vertically.
You might want to consider using a Grid or a DockPanel instead.

Is there a way to plot OXYplot graph in custom area in WPF window?

I want to put several graphs in one WPF window using OXYplot library, so there will be some WPF components (like buttons) and some rectangles with graphs. It there a way to do it? In all examples the OXYplot graph occupies the whole WPF window.
I tried to put it inside a rectangle like this, but got an error "The type 'Rectangle' does not support direct content"
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="932,547,0,0" Stroke="Black" VerticalAlignment="Top" Width="100">
<oxy:PlotView Model="{Binding Model}"/>
</Rectangle>

Put it in a Panel or decorate it with a a Border:
<Border Background="Yellow" BorderBrush="Black" BorderThickness="1" Padding="10">
<oxy:PlotView Model="{Binding Model}"/>
</Border>
A PlotView is just a custom Control that you can use in your layout as you would use any other control in WPF.

To keep it simple, you could use Grid as well, to arrange multiple PlotView and buttons in desired layout.
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel1}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel2}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel3}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel4}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
</Grid>

Combination of ScrollViewer and Grid not working as expected

I defined the following DialogWindow:
<ui:DialogWindow x:Class="CodeElementRatingWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.12.0"
Title="CodeElementRatingWindow" Height="600" Width="800">
<Grid Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="60px"></RowDefinition>
<RowDefinition Height="510px"></RowDefinition>
<RowDefinition Height="30px"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
<ScrollViewer MinHeight="510px">
<Grid Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1" Name="ElementContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
<Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
</Grid>
</Grid>
</ui:DialogWindow>
The layout basically consists of three rows. The first row has a title label, the bottom row two buttons and in the middle, I want to have a list of UI elements that I add dynamically in the code to the Grid there. Since I don't know in advance how many items that are, I want to display them in a ScrollViewer.
I can see that ScrollViewer is drawn, but the problem is, the ScrollViewer overlaps with the title label and is also somewhat clumsy. When I remove the ScrollViewer, this is not the case. So what am I doing wrong?

Just change the Grid.Row=1 for the ScrollViewer. It will work. Refer below code.
<Grid Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="60px"></RowDefinition>
<RowDefinition Height="510px"></RowDefinition>
<RowDefinition Height="30px"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
<ScrollViewer MinHeight="510px" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1">
<Grid Name="ElementContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
<Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
</Grid>
</Grid>

Wrap Panel Not Wrapping when contained in other controls

I'm trying to implement an expander in WPF which in side there are some nested controls. One of these is a Wrap Panel which i'd like to wrap as the user changes the window size.
This works if i take the Grid Control parent of the WrapPanel out and put it in its own App but not in this format. As i'm not using minimum width for this Grid it suprises me why it doesnt wrap. Any ideas? Thanks
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" FontFamily="Calibri" FontSize="8">
<StackPanel Orientation="Vertical">
<Expander Margin="3" Padding="3">
<Expander.Header>
<StackPanel Orientation="Horizontal" MinWidth="150" Width="Auto" MinHeight="25">
<Label MinWidth="50">Label 1</Label>
<CheckBox VerticalAlignment="Center"></CheckBox>
<Border></Border>
<Label>Label 2</Label>
</StackPanel>
</Expander.Header>
<Expander.Content>
<StackPanel Orientation="Horizontal" >
<Label MinWidth="150">Add Image</Label>
<Grid Name="Grid1" ShowGridLines="True" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Name="Title1" MinHeight="25"></RowDefinition>
<RowDefinition Name="Number1" MinHeight="25"></RowDefinition>
<RowDefinition Name="PlaneA" MinHeight="25"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="Plane1" MinWidth="25" Width="Auto"></ColumnDefinition>
<ColumnDefinition Name="PlaneCheckBox" MinWidth="25" Width="Auto"></ColumnDefinition>
<ColumnDefinition Name="Border1" MinWidth="25" Width="Auto"></ColumnDefinition>
<ColumnDefinition Name="List1" Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<WrapPanel Grid.Row="2" Grid.Column="3" Orientation="Horizontal" VerticalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" VerticalAlignment="Center"></CheckBox>
<Label Grid.Column="1">No. 1</Label>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" VerticalAlignment="Center"></CheckBox>
<Label Grid.Column="1">No. 1</Label>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" VerticalAlignment="Center"></CheckBox>
<Label Grid.Column="1">No. 1</Label>
</Grid>
</WrapPanel>
</Grid>
</StackPanel>
</Expander.Content>
</Expander>
</StackPanel>

StackPanel has an infinite size in the orientation direction. so when using a WrapPanel inside a StackPanel you must limit the size of the StackPanel in that direction. Grid has a finite size on the other hand, so you can see your content wrapping.

WPF project with Grids

I have this Windows app:
<Window x:Class="PlayTube.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="800" Width="1400">
<Grid Background="#FFD86F6F">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Height="70" Background="#FF9A9A9A">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" Height="25" Width="200" Name="SearchTextBox" />
<Button Grid.Column="2" Height="25" Width="80" Content="Search" Click="Button_Click" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MaxWidth="250" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="300" MaxWidth="350"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Background="#FFFFFF89">
</Grid>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC" />
<Grid Background="#FF05BECB" Grid.Column="2">
</Grid>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="3" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Grid Background="#FF4E04A7" Grid.Column="4">
<MediaElement Stretch="Fill" />
</Grid>
</Grid>
</Grid>
As you can see i have 3 Grids and i want to know if it possible the every grid will be managed from a class, because i dont want that all the logic will be in this main Windows class.

Right click on your project select the Add sub menu and then select user control, you should get this dialog.
Give the control a name and click ok
build your project and look in the toolbox, you should see right at the top that the new user control you added will be there.
drag this item in to the content of your grid and it should set everything up for you.
afer doing this my window now looks like
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:UserControl1 HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>
</Grid>
</Window>

Categories

Resources