I've done a google search already and many people have said to remove all the height/width/margin properties, but this doesn't seem to work for the text boxes where you enter the binary value and the decimal value. Right now everything will resize accordingly if you drag the window, but the buttons will still cut out sometimes.
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="Binary to Decimal Converter" FontSize="25" FontFamily="Times New Roman" FontWeight="Bold" TextAlignment="Center" Grid.ColumnSpan="3" Grid.Column="1" Grid.Row="1"/>
<TextBox x:Name="binaryValue" Grid.Column="3" Grid.Row="3" TextWrapping="Wrap" Text="" BorderThickness="1" FontSize="20" TextChanged="binaryValue_TextChanged" FontFamily="Times New Roman" Padding="0" Margin="0,0,0,10"/>
<TextBox x:Name="decimalValue" Grid.Column="1" Grid.Row="3" TextWrapping="Wrap" Text="" BorderThickness="1" FontSize="20" FontFamily="Times New Roman" TextChanged="decimalValue_TextChanged" Padding="0" Margin="0,0,0,10"/>
<TextBlock x:Name="textBlockBin" TextWrapping="Wrap" Text="Binary Value:" Grid.Column="1" Grid.Row="2" TextAlignment="Center" FontFamily="Times New Roman" FontSize="16" Margin="0,0,0,14"/>
<TextBlock x:Name="textBlockDec" TextWrapping="Wrap" Text="Decimal Value:" Grid.Column="3" Grid.Row="2" TextAlignment="Center" FontFamily="Times New Roman" FontSize="16" Margin="0,0,0,14"/>
<Button x:Name="buttonConvert" Content="Convert!" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="2" Grid.Row="5"/>
</Grid>
</Page>
Your problem comes because you are using * (relative sizes) for your column heights and widths.
Because your text is a fixed size, it would be better to give the columns and rows a fixed size also in those cases. Then you can use * for the edges, so that it scales around the text.
Alternatively, you can use Auto.
For example:
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
You can then give the Page a minwidth and minheight to prevent it shrinking smaller than the content.
Related
I have UserControl with a Grid that is divided into rows and columns. Something like this:
how can I add ListView on multiple rows and columns? For example:
Part of my xaml:
<Grid Margin="30,0,30,0" Background="#00000000">
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="60" />
<RowDefinition Height="160"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.4*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="0.5*"></ColumnDefinition>
<ColumnDefinition Width="0.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="1"
FontSize="28"
FontFamily="../Fonts/#GeForce-Bold"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="White">
<TextBlock Text="Deploy" TextDecorations="Underline"/>
</Label>
...
...
</Grid>
<Grid Grid.Row="2" Grid.Column="0">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="0.5*"></ColumnDefinition>
<ColumnDefinition Width="0.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="2" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="0.3*"></RowDefinition>
<RowDefinition Height="0.7*"></RowDefinition>
</Grid.RowDefinitions>
...
...
My goal is to display ListView at rows 0-3 and columns 0-2.
Mark already gave the hint in the comments, but for the sake of having an answer including an example, here it is:
You are locking for the Grid.ColumnSpan (or Grid.RowSpan) property.
The following code will place the list view starting in column 1 and extending over a total of 2 columns:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="1" Grid.ColumnSpan="2">
<ListViewItem>item 1</ListViewItem>
<ListViewItem>item 2</ListViewItem>
</ListView>
</Grid>
For my WPF project in C#, I have to create a menu state which should look like image below
So far, I have created
XAML Code for this window:
<UserControl x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="800">
<Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="400*"/>
<ColumnDefinition Width="200*"/>
</Grid.ColumnDefinitions>
<!-- title -->
<Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Franklin Gothic Heavy">
<Viewbox>
<TextBlock>Title</TextBlock>
</Viewbox>
</Label>
<!-- menu -->
<Grid Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="2" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="4" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="6" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="8" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
</Grid>
</Grid>
</UserControl>
Problem with this window is this components (label and buttons with their contents) does not scale properly. What I want is, when I resize the window I want this components to be proportional to window. Not sure if the grid layout is problem, but how can I fix this components scale properly.
EDIT:
Ok, so I followed your instructions and I like the results (everything seems to scale good enough),
but I have two more minor problems:
1) With a new changes to XAML code, my last button is colliding with the south border of the window, which is not what I want. What I want is an empty space with size of almost exactly (if possible) or close space, like between Label "Title" and north border of the window.
I found solution by defining a new line at the end <RowDefinition Height="*"/>. Not sure if this is a correct way to go.
2) Thus, so far I understand that , 1, 2*,... multiplies the current size. However, it seems I still feel like I don't fully understand it. Currently, I am asking myself, how can I now change the size (width or height in some case) of the button components inside grid layout?
Finally, do I change properties for the size directly to button or via grid layout?
Here is the code for a new window.
<UserControl x:Class="TypeRacer_Client.state.MenuState"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="800">
<Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- title -->
<Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Franklin Gothic Heavy">
<Viewbox>
<TextBlock>Title</TextBlock>
</Viewbox>
</Label>
<!-- menu -->
<Grid Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="2" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="4" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="6" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="8" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
</Grid>
</Grid>
</UserControl>
Use star sizing (ratios) to size your grid's rows etc. Like , 2, 4* etc. This will make the rows and columns keep the same ratios, no matter what size the window is, like this:
<RowDefinition Height="*" />
<RowDefinition Height="2* /> //this will be 2x the previous row's height
Style the buttons for consistent width/height/other properties etc.
<Style TargetType="Button" x:Name="SomeButtonStyle">
<Setter Property="Width" Value="90" />
</Style>
then , for each button you want the same height/width/whatever property:
<Button Style="{StaticResource SomeButtonStyle}" />
This will keep you from putting a width, height or font etc. in EVERY button you made, and makes it much faster to change the value in one place, instead of every button.
I want to prevent a gap from appearing in my wpf window without modifying the behavior of the remaining splitters. Please note that the longest vertical splitter is supposed to be able to slide to the left; I just don’t want the gap to appear when it is moved. A comment has been added to the GridSplitters that make up the undesired gap. How do I prevent the gap from appearing? My XAML code is listed below:
<Window x:Class="MyAdvancedGrid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="480"
Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="250"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0"
Grid.Column="2"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="2"
Background="Black"
Height="5" /> <!-- A gap involves this splitter.-->
<GridSplitter Grid.Column="1"
HorizontalAlignment="Left"
Grid.RowSpan="2"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/> <!-- A gap appears between this and the splitter above when this vertical splitter is moved to the left.-->
<GridSplitter Grid.Column="2"
Grid.Row="1"
Grid.ColumnSpan="1"
HorizontalAlignment="Right"
Grid.RowSpan="1"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/>
</Grid>
</Window>
Its because your horizontal splitter is only spanning 2 columns.
If you want the horizontal splitter to span all 3 columns (left of the tall vertical splitter), then you should put it in Column 1, and make the ColumnSpan be 3.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="250"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0"
Grid.Column="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="3"
Background="Black"
Height="5" /> <!-- see changes above.-->
<GridSplitter Grid.Column="1"
HorizontalAlignment="Left"
Grid.RowSpan="2"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/>
<GridSplitter Grid.Column="2"
Grid.Row="1"
Grid.ColumnSpan="1"
HorizontalAlignment="Right"
Grid.RowSpan="1"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/>
</Grid>
I have a Grid with its background as black an opacity to 0.5 and in it is there another grid with opacity to 1 and background as White. But the inner grid still shows as its opacity was 0.5
<Grid Grid.ColumnSpan="2" Grid.RowSpan="2" Background="Black" Opacity="0.5" Visibility="{Binding Alertar, Converter={cnv:boolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="1" Background="Black" Opacity="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="1.5*"/>
</Grid.RowDefinitions>
<Rectangle Grid.ColumnSpan="3" Grid.RowSpan="2" Fill="Black" Opacity="1"/>
<TextBlock Grid.Column="1" Margin="0,15,0,0" Text="{Binding ReporteInconsistencias}" />
<Button Grid.Column="1" Grid.Row="1" Content="Aceptar" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10"/>
</Grid>
</Grid>
I'm trying to emulate a win8 alert screen there is another way to do this? or How to prevent this inheritance? why this happen?
A little messy but this should work i think. Basically controls are stacked. So having the grid come after the first grid it shouldn't effect the opacity. May need to be tweaked, but something along the lines of this should work:
<Grid Grid.ColumnSpan="2" Grid.RowSpan="2" Visibility="{Binding Alertar, Converter={cnv:boolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="3" Background="Black" Opacity="0.5" />
<Grid Grid.Row="1" Background="Black" Opacity="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="1.5*"/>
</Grid.RowDefinitions>
<Rectangle Grid.ColumnSpan="3" Grid.RowSpan="2" Fill="Black" Opacity="1"/>
<TextBlock Grid.Column="1" Margin="0,15,0,0" Text="{Binding ReporteInconsistencias}" />
<Button Grid.Column="1" Grid.Row="1" Content="Aceptar" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10"/>
</Grid>
</Grid>
I have a small screen program which displays patients at the top there is a search button where u can enter by name. I need this search display to be controlled by a button that is, it should not display any records (prev entered) unless click on this button, how would i set this up?
<Grid x:Name="LayoutRoot" Background="LightGray" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name:" Margin="3"></TextBlock>
<TextBox Grid.Column="1" x:Name="sTxtFirstName" Margin="3"></TextBox>
<TextBlock Grid.Column="2" Text="Last Name:" Margin="3"></TextBlock>
<TextBox Grid.Column="3" x:Name="sTxtLastName" Margin="3"></TextBox>
<TextBlock Grid.Column="4" Text="Gender:" Margin="3"></TextBlock>
<ComboBox Grid.Column="5" x:Name="sCombGender" Margin="3">
<ComboBoxItem Content=""></ComboBoxItem>
<ComboBoxItem Content="Male"></ComboBoxItem>
<ComboBoxItem Content="Female"></ComboBoxItem>
</ComboBox>
<Button x:Name="btnSearch" Grid.Column="6" Margin="3" Height="30" Command="{Binding CMDSearch}" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="/PBM;component/Resources/Images/search.png" VerticalAlignment="Center" Margin="0,0,2,0" ></Image>
<TextBlock Text="Search" Width="50" VerticalAlignment="Center" Margin="1,0,0,0"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
You're going about it all wrong. Only use grid for laying out controls on the screen.
Use a ListBox to show a list of items.
Declare your items in an ObservableCollection.
Use data binding to bind the listbox to the observable collection.
Use C# to manipulate the contents of the list in response to your button click, then the list data appears automatically.