I have this simple window for the purpose of showing my problem:
<Window x:Class="BattleShip.Views.test"
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"
mc:Ignorable="d"
Title="test" Height="600" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="Label" Grid.Row="0" Grid.Column="0" Content="X" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
Background="Coral" FontSize="50"/>
</Grid>
The problem is that the text in the label does not stay centered vertically when increasing the font size. Like this:
Font size 50
It gets pushed down. Is there any way to force the text to stay in the exact middle?
This is with font size 70. It's moving off the screen:
Font size 70
What you are trying to do, can be achieved with a TextBlock instead of a label. They basically gives you the same features with small differences.
<TextBlock x:Name="TextBlock" Grid.Row="0" Grid.Column="0" Text="X" TextAlignment="Center" VerticalAlignment="Center"
Background="Coral" FontSize="50"/>
EDIT:
I don't really like this solutions, however this will give you your result, however it's a bit of a cheat, and it has to be controlled carefully, when you manipulate controls with margins in negative numbers.
<Border Margin="0 -5 0 0" Background="Coral">
<TextBlock Text="X" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="50"/>
</Border>
The problem about my first solution is that the text was centered, but the textblock/label is expanded behind the grid, so therefore the offset is visually messed up.
Anyways. Hope this helps you.
Related
I'm experiencing a problem with my UI XAML code. The problem is that I can't get my TextBox to fill in all available space in the Grid Row that contains it. I read quite a few posts about similar issues, and the summary of them is "don't use stack panel for this" and "set VerticalAlignment="Stretch"", but this did not work for me. Near the bottom of my XAML you can see the text box that I've been trying to get to stretch to fill the height of the grid row, along with the text box I'm hoping to have work by the end in a comment.
Having VerticalAlignment="Stretch" does not change the behavior of the XAML, and produces a one-line TextBox as if I didn't assign VerticalAlignment="Stretch" at all. This is what the GUI page looks like with or without VerticalAlignment="Stretch":
Here is the respective XAML code.
<ContentControl x:Class="Analytics.Configuration.UI.DataflowTemplateView"
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"
xmlns:local="clr-namespace:ComputersUnlimited.Analytics.Configuration.UI"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:core="http://schemas.cu.net/2011/xaml/presentation/core"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
d:DataContext="{d:DesignInstance local:DataflowTemplateViewModel, IsDesignTimeCreatable=True}">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="Row0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Command="{Binding NavigateToPreviousControlCommand}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,20,0">Back</Button>
<TextBlock Grid.Column="1" Text="M-Code Template Text" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<!--<TextBox Grid.Row="1"
TextWrapping="Wrap"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,6,0,6"
AcceptsReturn="True"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"/>-->
<TextBox Grid.Row="1" VerticalAlignment="Stretch"/>
</Grid>
I've tried all the advice I've ran into with no success. So, if you have any advice, sharing would be appreciated.
Thank you.
Most likely there is an implicit style for TextBox that is setting a default Height. If that's the case, you'll need to set:
Height="NaN"
On your TextBox in order for it to stretch.
I'm guessing there's not a control that does this automatically, but I'm looking for a way to implement something like this in a wpf application. Here's what I'd like for it to do.
Take commands into it like a cli (This could be a separate text box
if necessary).
Output normal text and support HTML colors.
History that scrolls up as your cursor moves down after each command.
HTML formatted divs, tables, and text formatting (no js needed)
Small images no larger than 100x100
How do I start making this? Do I start with a StackPanel?
I Added two rows with four colomns in a grid panel
In the first row fourth colomn add a stackpanel for normal text
Out side the grid you also add image as well as inside
That I include for your reference
The grid is nested in the scroll
<Window x:Class="Wpftest.MainWindow"
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:Wpftest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<ScrollViewer Margin="5" CanContentScroll="False"
HorizontalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="Augustus.jpg" Height="100" Margin="10"/>
<Label Grid.Column="1" Content="Augustus - 63BC - 14AD" />
<Image Grid.Column="2" Source="Tiberius.jpg" Height="100" Margin="10"/>
<Label Grid.Column="3" Content="Tiberius - 42BC - 37AD"/>
<StackPanel Grid.Row="0" Grid.Column="4">
<TextBlock FontSize="15">Your Normal text</TextBlock>
</StackPanel>
<Button Grid.Row="1" Content="Learn"
HorizontalAlignment="Center" VerticalAlignment="Center"
Padding="10,5"/>
<Button Grid.Row="1" Grid.Column="2" Content="Learn"
HorizontalAlignment="Center" VerticalAlignment="Center"
Padding="10,5"/>
<Button Grid.Row="1" Grid.Column="4" Content="Inputs"
HorizontalAlignment="Center" VerticalAlignment="Center"
Padding="10,5"/>
</Grid>
</ScrollViewer>
</Window>
Problem: When adding a ScrollViwer around a Grid the Grid scaling is cancelled!
Eksampel:
I have created a grid width 3 columns, the 1. coulymn should always be 2 times larger than column 2 and 3!
Without the ScrollViewer this is always true, but when adding it it allows each column to decide its own size.
<Window x:Class="alternatingGridRow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="Auto" Loaded="WindowLoaded">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<Grid x:Name="LayoutRoot" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="23" MaxHeight="60"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Stretch" Text="sdasdasdasdsadsadasddasdck" TextWrapping="Wrap" VerticalAlignment="Top" />
<TextBlock Foreground="Red" Grid.Column="1" HorizontalAlignment="Stretch" Text="sdasdasdasdsadsadasddasdck" TextWrapping="Wrap" VerticalAlignment="Top" />
</Grid>
</ScrollViewer>
As you can clearly see the scaling factors are completely wrong! As the 2. column is way to large! and the 3. column is some random size...
Wrong Scaling factors
Any advice on this is well recieved....
Cheers Martin
You're asking the grid to assign a percentage of infinite space to each column. Infinite because horizontal scrolling is enabled on your ScrollViewer, and the whole point of ScrollViewers is to virtualize space. So what you're asking it to do doesn't even make sense.
Ok I see your point in why the column sizes a screwed.
But.. I thought of a solution as I read your posts...
As, Mohammed said, set a fixed width on my grid, well.. I want my grid to have same width as scrollviewer unless it gets to small, then I want the scrollviewer to take affect!
So.. my solution is:
MinWidth="500" Width="{Binding ActualWidth, ElementName=scrollviewer}"
<Window x:Class="alternatingGridRow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="Auto">
<ScrollViewer x:Name="scrollviewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<Grid x:Name="LayoutRoot" ShowGridLines="True" MinWidth="500" Width="{Binding ActualWidth, ElementName=scrollviewer}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="23" MaxHeight="60"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Stretch" Text="sdasdasdasdsadsadasddasdck" TextWrapping="Wrap" VerticalAlignment="Top" />
<TextBlock Foreground="Red" Grid.Column="1" HorizontalAlignment="Stretch" Text="sdasdasdasdsadsadasddasdck" TextWrapping="Wrap" VerticalAlignment="Top" />
</Grid>
</ScrollViewer>
</Window>
(Only fixed for horizontal)
Thx.
The current setup is wrong, because the ScrollViewer does not limit the width and height of its child (i.e. unlimited), moreover, the Grid always fills all the available horizontal and vertical space available on its parent container, and that is why you see this weird behavior. You have to do one of the followings:
either, remove the ScrollViewer as you mentioned.
or, set a fixed height and width for your Grid.
I'm trying to show a FlowDocument in a WPF form and have tried both RichTextBox and FlowDocumentScrollViewer. I also require that the window resizes to be able to show all text.
Unfortunately, when I set SizeToContent="WidthAndHeight" for the Window itself, no matter what content I put in the FlowDocument, the window expands to the full width of all my displays! The height seems to resize fine, however.
Anyone know how to get it to resize properly? Looked all over and cannot figure out how to get this going...
XAML below:
<Window x:Class="CustomControls.SecureConfirmationDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SecureConfirmationDialog"
MinHeight="120" MinWidth="200"
Height="120" Width="300"
ResizeMode="NoResize"
SizeToContent="WidthAndHeight"
WindowStyle="ToolWindow"
Loaded="Window_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<FlowDocumentScrollViewer Name="flowMsg" Grid.Row="0" Grid.ColumnSpan="3" Margin="3" IsToolBarVisible="False" ScrollViewer.VerticalScrollBarVisibility="Hidden" />
<TextBox Name="txtConfirm" Grid.Row="1" Grid.Column="0" Text="Testing" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="3" />
<Button Name="btnOK" Grid.Row="1" Grid.Column="1" Content="OK" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="3" Width="50" Click="btnOK_Click" />
<Button Name="btnCancel" Grid.Row="1" Grid.Column="2" Content="Cancel" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="3" Width="50" Click="btnCancel_Click" />
</Grid>
</Window>
SizeToContent only "works" if the content is actually bounded, in this case however the Grid, which is the content of Window, has no size restrictions so it will try to get all the space it can get, the window responds by giving it as much space as fits the screen.
If you want to prevent this you would need to make the container for your document to size to their content which might be impossible if the document does not have any bounds itself and also behaves in a give-me-all-you-have manner.
Is there any way to make a silverlight/wpf grid stretch to its parent width/height (using auto) but do no expand to acommodate children? In a Silverlight application I have the following:
Main Page, with a Frame:
<ScrollViewer x:Name="LayoutRoot" BorderThickness="0" Padding="0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="{StaticResource DefaultBackgroundBrush}" BorderBrush="{StaticResource DefaultBorderBrush}" BorderThickness="0,0,0,1">
<!--Some header content-->
</Border>
<sdk:Frame x:Name="Frame" Grid.Row="1" UriMapper="{StaticResource UriMapper}" ContentLoader="{StaticResource ContentLoader}" BorderThickness="0" />
</Grid>
</ScrollViewer>
In this frame I load the desired page:
<navigation:Page
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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="MyNamespace.MyPage" mc:Ignorable="d"
d:DesignWidth="640" d:DesignHeight="480"
Title="{StaticResource PageTitle}">
<Grid x:Name="LayoutRoot">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel d:LayoutOverrides="Width" Visibility="Collapsed">
<!-- Some header content -->
</StackPanel>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="Titletext" FontSize="13.333" FontWeight="Bold" d:LayoutOverrides="Height"/>
<RichTextBox BorderThickness="0" IsReadOnly="True" Background="{x:Null}" BorderBrush="{x:Null}" VerticalScrollBarVisibility="Auto" Grid.Row="1" Padding="0">
<Paragraph><Run Text="Text that will force the grid to expand."/></Paragraph>
</RichTextBox>
</Grid>
</Grid>
</Grid></navigation:Page>
The frame in the main page is designed to deal with its content overflow ( through the scrollviewer), because a I have some pages that demand a minimum size.
The grid that holds the text box stretches to the parent, but when I put a large text inside the text box the grid resizes to the width of the text, making the horizontal scroll bar of the frame's scrollviewer appear. I'm looking for a solution that doesn't require binding the max size of the grid to the max size of its parent ( this wouldn't work without hacks in Silverlight anyway, since binding to ActualWidth/Height is bugged). Any ideas?
You just have to change the wrapping like already posted AND change one property of the ScrollViewer:
ScrollViewer.HorizontalScrollBarVisibility="Auto"
to
ScrollViewer.HorizontalScrollBarVisibility="Disabled"