Please take a look at this picture:
I try to create same label with 2 sizes:
<Grid>
<Label Content="11" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="50" />
<Label Content="%" HorizontalAlignment="Right" FontSize="20"
VerticalAlignment="Top"/>
</Grid>
But currently this is not like the picture:
To have such a result, your grid must be really small. I see at least 3 solutions to your issue:
1- Make your grid a bit bigger until it fits.
2- Put 2 columns in your grid, you'd put the number on the left column and the % on the right columns.
3- You could use a StackPanel like this:
<Grid>
<StackPanel Orientation="Horizontal">
<Label Content="11" FontSize="50" Padding="0"/>
<Label Content="%" FontSize="20" VerticalAlignment="Top" Padding="0,10,5,5"/>
</StackPanel>
</Grid>
EDIT:
<Grid>
<StackPanel Orientation="Veritical">
<StackPanel Orientation="Horizontal">
<Label Content="11" FontSize="50" Padding="0"/>
<Label Content="%" FontSize="20" VerticalAlignment="Top" Padding="0,10,5,5"/>
</StackPanel>
<Label Content="Storage">
</StackPanel>
</Grid>
Related
I want to add two TextBlocks in one column of my WPF project. I use the following codes but They locate on eachother now. How may I insert them after each other (not on each other)? Please note that I don't want to put them in two seperate columns.
<TextBlock Grid.Row="6" Grid.Column="1" x:Name="FirstName" Margin="10,10,0,0"/>
<TextBlock Grid.Row="6" Grid.Column="1" x:Name="LastName" Margin="10,10,0,0" Grid.ColumnSpan="2"/>
You can use a WrapPanel to host the TextBlocks horizontally:
<WrapPanel Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2">
<TextBlock x:Name="FirstName" Margin="10,10,0,0" Text="FirstName" />
<TextBlock x:Name="LastName" Margin="10,10,0,0" Text="LastName" />
</WrapPanel>
I have a program that lets you edit different properties so that you can edit a different control.
I'm trying to get the layout right for the editor but I can't seem to get it easily.
I have put it in a viewbox so it sizes according to the screen. This is the XAML for the editor:
<Viewbox Grid.Column="0" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Center">
<TabControl Background="{DynamicResource CustomOrange}">
<TabItem Header="Background" Visibility="Visible" FontSize="10">
<StackPanel>
<DockPanel LastChildFill="False">
<Label Content="Background" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30"/>
</DockPanel>
<DockPanel LastChildFill="False" Margin="2">
<Label Content="Background Image" DockPanel.Dock="Left"/>
<Button Content="Find Image" DockPanel.Dock="Right"/>
</DockPanel>
<DockPanel LastChildFill="False" Margin="2">
<Label Content="Show Text" DockPanel.Dock="Left"/>
<CheckBox Content="Find Image" DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DockPanel>
</StackPanel>
</TabItem>
<TabItem Header="Button" Visibility="Visible">
<StackPanel>
<DockPanel LastChildFill="False">
<Label Content="Background IMAGE" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30"/>
</DockPanel>
<DockPanel LastChildFill="False" Margin="2">
<Label Content="Background Image" DockPanel.Dock="Left"/>
<Button Content="Find Image" DockPanel.Dock="Right"/>
</DockPanel>
<DockPanel LastChildFill="False" Margin="2">
<Label Content="Show Text" DockPanel.Dock="Left"/>
<CheckBox Content="Find Image" DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DockPanel>
</StackPanel>
</TabItem>
</TabControl>
</Viewbox>
The problem is that the first TabItem looks like this:
But because I have changed the content of the label, the second TabItem looks like this:
Now, I know there are simpler ways to do this, but the problem is I don't know for sure how many options I am implementing for the user (Width, Height, Location, Font, Background, Content etc).
I have done it before with a grid but the problem is anytime I remove an option then all of them need to be re-done so that they are all in the exact Grid.Row which is why I am using StackPanel for the rows, and I am using the DockPanel so they keep separated horizontally
Thank you!!!
I have problem with align two labels who has different size and are neighbors. I have to show variable as big size and units as small. But because of the different position of the font baseline, the texts are not located on the same line. Look at my xaml:
<StackPanel VerticalAlignment="Bottom" Orientation="Horizontal">
<Label Content="5" FontSize="70" FontWeight="DemiBold" Foreground="White" Padding="0" Margin="0" BorderBrush="White" BorderThickness="1" />
<Label Content="s" FontSize="14" Foreground="White" Padding="0" Margin="0" BorderBrush="White" BorderThickness="1" VerticalAlignment="Bottom" />
</StackPanel>
I see solution of this problem: I can pick up margin or padding, but it is not good decision. In addition, I can not remove the upper gap of a larger text. May be exist more elegant way to deside this problem. Please, show me this, if somebody know, or tell, that is isn't possible, and I will pick up margin or padding. I was looking for a solution for a long time. The most similar here: WPF: Aligning the base line of a Label and its TextBox
But my elements has different size and this way is bad for me.
Thanks for any help!
If you are not required to use Labels, you can achieve baseline alignment by using Runs inside a TextBlock.
<TextBlock VerticalAlignment="Bottom">
<Run Text="5" FontSize="70" FontWeight="DemiBold" Foreground="White" />
<Run Text="s" FontSize="14" Foreground="White" />
</TextBlock>
You should use that margins:
<StackPanel VerticalAlignment="Bottom" Orientation="Horizontal">
<Label Content="5" FontSize="70" FontWeight="DemiBold" Foreground="White" Padding="0" Margin="0" BorderBrush="White" BorderThickness="1" />
<Label Content="s" FontSize="14" Foreground="White" Padding="0" Margin="0 0 0 12" BorderBrush="White" BorderThickness="1" VerticalAlignment="Bottom" />
</StackPanel>
I am currently sitting on a Silverlight-Listbox and have some
trouble getting my listBox right.
Its (visually) starts from the second item.
I have to scroll up to see the first one.
Why is this happening and how could I fix this?
<ListBox x:Name="ServingsList"
Foreground="White"
Background="#FFB88A8A"
SelectionChanged="servingSelected"
Margin="0,0,0,297">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="70" Width="432">
<Rectangle x:Name="Linie"
Fill="#FF8D8D8D"
HorizontalAlignment="Right"
Height="2"
StrokeThickness="0"
VerticalAlignment="Top"
Width="380"
Margin="0,-30,0,0" />
<TextBlock x:Name="ServingTitel"
TextWrapping="Wrap"
Text="{Binding name}"
FontSize="21.333"
Margin="50,-60,0,0" />
<Image x:Name="Ribbon"
HorizontalAlignment="Right"
Height="30"
VerticalAlignment="Top"
Width="151"
Source="/TEX/GrayRibbon.png"
Stretch="UniformToFill"
Margin="0,-60,0,0" />
<TextBlock x:Name="Kcal"
TextWrapping="Wrap"
Text="{Binding kalorien]}"
FontSize="18.667"
Height="23"
Margin="0,-92,8,0"
TextAlignment="Right" />
<Button Content="1"
Width="55" Height="55"
BorderThickness="3"
FontSize="18.667"
Padding="-1,-2,0,0"
Margin="-400,-87,0,0"
FontWeight="Bold"
Click="servingButtonClicked" />
</StackPanel>
</DataTemplate>
</ListBox>
You need to check your Margin values - in the main list you're putting 297 pixels of whitespace below your list box. Other elements have weird values too. Expression Blend sometimes messes with the Margins if you change from a StackPanel to a Grid.
e.g:
Margin="0,0,0,297">
This is my original code:
<StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal">
<ProgressBar Height="23" Name="searchProgressBar" Foreground="Blue" BorderBrush="#00000000" BorderThickness="1" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
<TextBlock Text="asdf" Height="23" Name="progressTextBlock" VerticalAlignment="Top" Foreground="Red" HorizontalAlignment="Right"/>
</StackPanel>
The progressbar was very small, maybe 2 or 3 pixels wide, then there was the text block and empty space after. So I tried explicitly docking the elements to sides:
<DockPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" >
<ProgressBar DockPanel.Dock="Left" Height="23" Name="searchProgressBar" Foreground="Blue" BorderBrush="#00000000" BorderThickness="1" VerticalAlignment="Top" />
<TextBlock DockPanel.Dock="Right" Text="asdf" Height="23" Name="progressTextBlock" VerticalAlignment="Top" Foreground="Red" HorizontalAlignment="Right"/>
</DockPanel>
No avail. I also tried modifying each solution by setting HorizontalAlignment="Stretch" on the progress bar, but there's no change. How do i stretch it to fill all the space there is after the text block has been rendered?
Remove DockPanel.Dock="Left" from the ProgressBar and switch the order of the controls:
<DockPanel>
<TextBlock DockPanel.Dock="Right" Height="23" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<ProgressBar Height="23" VerticalAlignment="Top" />
</DockPanel>
By default, DockPanel has its property LastChildFill set to true, which will make the ProgressBar take the available space.
ahh I see what you're trying to do. This is probably a better place to use a grid with 2 column definitions. The first(the left one) columndefinition with Width="*" and the second(the right one) with a width set to Width="Auto". For more info about auto vs * see http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/9a7e6591-1fae-4295-b68a-be97e8e53d06/