Equal spacing between controls - c#

I want to place image and text under image as below. The height of the rows have to be equally divided. How can this work if I want images to size accordingly?
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="40*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Image Grid.Column="1" Grid.Row="0" Source="pack://application:,,,/WpfApplication5;component/led.green.off.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="1" Text="Turret Power" ></TextBlock>
<Image Grid.Column="1" Grid.Row="2" Source="pack://application:,,,/WpfApplication5;component/toggle.sheath.DOWN.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="3" Text="Off" ></TextBlock>
<Image Grid.Column="1" Grid.Row="4" Source="pack://application:,,,/WpfApplication5;component/toggle.sheath.DOWN.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="5" Text="Off" ></TextBlock>
<Image Grid.Column="1" Grid.Row="6" Source="pack://application:,,,/WpfApplication5;component/toggle.sheath.DOWN.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="7" Text="Off" ></TextBlock>
<Image Grid.Column="1" Grid.Row="8" Source="pack://application:,,,/WpfApplication5;component/toggle.sheath.DOWN.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="9" Text="Off" ></TextBlock>
<Image Grid.Column="1" Grid.Row="10" Source="pack://application:,,,/WpfApplication5;component/toggle.sheath.DOWN.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="11" Text="Off" ></TextBlock>
</Grid>
If I do the above, the images are big and go over the window

You're missing 2 <RowDefinition> in <Grid.RowDefinitions> (according to your usages of Grid.Row)
You don't have to put a weight in your row/column definitions if they're all the same, and you don't even have to set Height if the value is *, since this is the default (you can remove Height="10*" from each <RowDefinition>)
Maybe you'll want to have some column definitions set with Width="Auto", but I'll leave that to you.

Related

WPF fixed rows are resizing

I'm new in WPF and I try to creat specific UserControl to display data for a single product. I used Grid inside UserControl. So I create 5 columns and 3 rows. I want ot make 4 columns fixed (image, green-clored, blue-colored and column with controls) and last column (orange-colored) to fill all availabel space. Here my XAML and few screenshots:
<Grid Margin="0,0,0,5" Background="#FFDCD9D9" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" Source="{Binding ItemThumbnailUrl}" Stretch="None" HorizontalAlignment="Right" Margin="5,0" />
<StackPanel Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" Background="#FFDA6F6F">
<Label BorderThickness="0" Content="dsgsdgsgsgsdgsdg sd " FontSize="13.333" FontWeight="Bold" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" Background="#FF517823" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding ItemPrice}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="грн." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Orientation="Horizontal" Background="#FF214299" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding Quantity}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="шт." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Background="#FF88B91E" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="грн." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="2" Orientation="Horizontal" Background="#FF228CBD" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="шт." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<CheckBox Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Grid.Column="3" Grid.Row="2" Background="{x:Null}" Content="Редакт." Foreground="#FF444343" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Grid.Column="4" Grid.RowSpan="2" Grid.Row="1" Background="#FFE08212" HorizontalContentAlignment="Stretch" />
</Grid>
If I have "Title" text (in red-colored cell) less than sum of 3 my fixed columns, everything is OK, but if a text larger I have problems with some paddings between columns (please see pictures)
So how can I resolve this problem?
I could reproduce your issue in a variety of cases when a Grid is used in a DataTemplate. I removed the StackPanel and used a TextBlock, then a a TextBlock hosted in a separate Grid, but all with the same result. I guess something is going wrong when WPF is determining the required size. I have often occurred this kind of strange behaviour in Grids (when part of an ItemTemplate). If you need a quick workaround then this should do the trick
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="80" MaxWidth="80" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

TextBox/Grid overlapping ComboBox entries

I'm using Visual Studio 2013 and I wrote some code for Windows Phone 8.1 Apps in C#. Now I've got a little problem with the layout in XAML with grids.
Elements in grids should be ordered/layered in the order in the code, but this didn't work for me. I've got two grids in a grid and the comboboxlist of the first grid is overlapped by the other grid/textblock. I tried to rearrange the grid in XAML, but that also did not solved the problem.
overlapping image from the app
In this image there should be 2 more items in the open combobox list, but those are overlapped by the grid below it.
Here is the code snippet:
<Grid Margin="0, 50, 0, 0">
<Grid.RowDefinitions>
<RowDefinition Height="115"/>
<RowDefinition Height="80"/>
<RowDefinition Height="80"/>
<RowDefinition Height="115"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Third Row-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Woche:"/>
<ComboBox Name="WochenComboBox"
Grid.Column="0"
Style="{StaticResource StandardAppComboBox}"/>
<TextBlock Grid.Column="1"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Ort:"/>
<TextBox Name="OrtTextBox"
Grid.Column="1"
Style="{StaticResource StandardAppTextBox}"/>
</Grid>
<!--Second Row-->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Stunde:"/>
<ComboBox Name="StundenZeitenComboBox"
Grid.Column="0"
Style="{StaticResource StandardAppComboBox}"
ItemsSource="{Binding Einstellung, Converter={StaticResource EinstellungsStundenToComboBoxListConverter}}"
DisplayMemberPath="Value"
SelectionChanged="StundenZeitenComboBox_SelectionChanged"/>
<TextBlock Grid.Column="1"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Veranstaltungsart:"/>
<ComboBox Name="VeranstaltungsartComboBox"
Grid.Column="1"
Style="{StaticResource StandardAppComboBox}"/>
</Grid>
</Grid>
What should I use/do to remove this overlpapping.
Use stack panels. Items inside a stack panel will not overlap.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="115" />
<RowDefinition Height="80" />
<RowDefinition Height="80" />
<RowDefinition Height="115" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Third Row-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="Woche:" />
<ComboBox Name="WochenComboBox" Grid.Column="0" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Ort:" />
<TextBox Name="OrtTextBox" Grid.Column="1" />
</StackPanel>
</Grid>
<!--Second Row-->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="Stunde:" />
<ComboBox Name="StundenZeitenComboBox" Grid.Column="0" DisplayMemberPath="Value" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Veranstaltungsart:" />
<ComboBox Name="VeranstaltungsartComboBox" Grid.Column="1" />
</StackPanel>
</Grid>
</Grid>

Using template of pushpin, created in XAML, in code

I created a template for pushpin (image and some text) by XAML. However i don't know how to use it in my C# code.
Here is my temlate:
<maps:Map x:Name="myMap" Width="446" Loaded="myMap_Loaded">
<maps:Map.Layers>
<maps:MapLayer>
<maps:MapOverlay>
<toolkit:Pushpin x:Name="myPushpin">
<toolkit:Pushpin.Template>
<ControlTemplate TargetType="toolkit:Pushpin">
<Grid Background="WhiteSmoke">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Image x:Name="pushpinImg" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Height="30" Width="30"/>
<TextBlock x:Name="pushpinText" Grid.Row="0" HorizontalAlignment="Left" Grid.Column="1" Foreground="Green" TextWrapping="Wrap"/>
</Grid>
</ControlTemplate>
</toolkit:Pushpin.Template>
</toolkit:Pushpin>
</maps:MapOverlay>
</maps:MapLayer>
</maps:Map.Layers>
</maps:Map>

How can i sort wpf textboxes straight?

I'm design a simple login window and i'm very wondering about this.
Well, this is my XAML code
<Grid ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label x:Name="label_ID" Height="30"/>
<TextBox x:Name="textBox_ID" Height="20" TabIndex="0">
<TextBox.Margin>
<Thickness Right="5"/>
</TextBox.Margin>
</TextBox>
</DockPanel>
<DockPanel Grid.Row="1">
<Label x:Name="label_PW" Height="30"/>
<PasswordBox x:Name="textBox_PW" Height="20" TabIndex="1">
<PasswordBox.Margin>
<Thickness Right="5"/>
</PasswordBox.Margin>
</PasswordBox>
</DockPanel>
<DockPanel Grid.Row="2">
<Label x:Name="label_IP" Height="30"/>
<TextBox x:Name="textBox_IP" Height="20" UndoLimit="2">
<TextBox.Margin>
<Thickness Right="5"/>
</TextBox.Margin>
</TextBox>
</DockPanel>
</Grid>
label_ID's string is ID
label_PW's string is Password
label_IP's string is 'IP'
And the output is like this:
https://www.dropbox.com/s/k23ft06layp0sl4/1.PNG?dl=0
The password text box only short then other.
(I want to short another text boxes to.)
How can i fix location of text boxes?
Thanks.
I think your DockPanels are not really needed, instead you could use two columns in the Grid:
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" x:Name="label_ID" Height="30"/>
<TextBox Grid.Row="0" Grid.Column="1" x:Name="textBox_ID" Height="20" TabIndex="0" Margin="5"/>
<Label Grid.Row="1" Grid.Column="0" x:Name="label_PW" Height="30"/>
<PasswordBox Grid.Row="1" Grid.Column="1" x:Name="textBox_PW" Height="20" TabIndex="1" Margin="5"/>
<Label Grid.Row="2" Grid.Column="0" x:Name="label_IP" Height="30"/>
<TextBox Grid.Row="2" Grid.Column="1" x:Name="textBox_IP" Height="20" UndoLimit="2" Margin="5"/>
</Grid>
Setting the first column's width to Auto ensures that the text will be visible, the second column will take the rest of the space (*).
It produces an output like this (with some test strings added by me):
Simplest way I could think of is
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Name="lblID" Content="ID:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Margin="5,2,5,2" />
<TextBox Name="txtID" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Margin="5,2,0,2" Width="250" Height="25" />
<Label Name="lblPwd" Content="Password:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="0" Grid.Row="1" Margin="5,2,5,2" />
<PasswordBox Name="pwdBx" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5,2,0,2" Width="250" Height="25" />
<Label Name="lblIP" Content="IP:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="0" Grid.Row="2" Margin="5,2,5,2" />
<TextBox Name="txtIP" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5,2,0,2" Width="250" Height="25" />
</Grid>
Right now I can only think of using the margin property as in:
<UIElement Margin="left, top, right, bottom" />
<Menu Name="EgMenu"
Margin="20,20,0,20" />
The margin property will help you position and size your UI elements in an easiser way thatt youy can visualise just looking at the text. But why not use WYSIWYG and, refine by editting XAML later.

Grid in ScrollViewer doesn't scroll horizontally

I think I'm missing something simple here... how do I get a Grid inside a ScrollViewer to scroll horizontally? I've enabled HorizontalScrollMode, and the content is definitely long enough that it runs off the screen, but it doesn't scroll. Here's the offending code (this ScrollViewer is the lone content of a row of the LayoutRoot Grid):
<ScrollViewer Grid.Row="1" VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollMode="Enabled">
<Grid Margin="120,0,0,100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Download" HorizontalAlignment="Center" Margin="0,0,0,10"/>
<local:BandwidthMeter Grid.Row="1" x:Name="PolicyDown" Grid.Column="0"/>
<TextBlock Grid.Column="2" Text="Upload" HorizontalAlignment="Center"/>
<local:BandwidthMeter Grid.Row="1" x:Name="PolicyUp" Grid.Column="2"/>
<TextBlock Grid.Column="4" Text="Download" HorizontalAlignment="Center"/>
<local:BandwidthMeter x:Name="ActualDown" Grid.Row="1" Grid.Column="4"/>
<TextBlock Grid.Column="6" Text="Upload" HorizontalAlignment="Center"/>
<local:BandwidthMeter x:Name="ActualUp" Grid.Row="1" Grid.Column="6" />
<TextBlock Grid.Column="7" Text="Campus-wide bandwidth usage" HorizontalAlignment="Center"/>
<Image Grid.Column="7" Grid.Row="1" Margin="80,0,0,0" Source="[image URL]" Stretch="UniformToFill"/>
</Grid>
</ScrollViewer>
Add the property HorizontalScrollBarVisibility="Auto" to your ScrollViewer.

Categories