I have the following in my XAML:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="7"/>
<RowDefinition Height="57"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="18">Title Text</TextBlock>
<Rectangle Grid.Row="1" Margin="0,2" Height="3" HorizontalAlignment="Stretch" Fill="#ff000000"/>
<Border Grid.Row="2" Margin="0" Padding="0" BorderBrush="Black" BorderThickness="1">
<TextBlock Margin="0" Padding="0" FontSize="55">123</TextBlock>
</Border>
</Grid>
The problem is that there is a space (about 10px) above the text in the bottom TextBlock. I can only seem to get rid of this space by using a much smaller font size.
Does anyone have an idea of why this space is showing up, and what I can do about it?
Thank you.
I believe it is because the default VerticalAlignment on a TextBlock is Stretch. Try setting it to Center:
<TextBlock Margin="0" Padding="0" FontSize="55" VerticalAlignment="Center">123</TextBlock>
If you really need to nudge it up you could add a negative top margin.
Related
I only have the following so far
<Grid>
<DockPanel Background="Red">
<DataGrid DockPanel.Dock="Bottom" Height="357"/>
<StackPanel Background="Gray" DockPanel.Dock="Top" />
</DockPanel>
</Grid>
I want this layout to be retained when the program is enlarged;
and not like it is now when I make it big:
How can i make this?
Is it that, what you have wanted? By default the DockPanel.LastChildFill property is set to true. So if you enlarge the window, StackPanel in your case was enlarged.
<Grid>
<DockPanel Background="Red">
<StackPanel Background="Gray" MinHeight="75" DockPanel.Dock="Top" />
<DataGrid DockPanel.Dock="Bottom"/>
</DockPanel>
</Grid>
Take a look at grids, you can specify the height of the first row to 357 if you wish but Auto will just adjust to the contents on that row for you. * means fill the remaining space of the grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"/>
<DataGrid Grid.Row="1"/>
</Grid>
There are a number of similar questions on SO but so far I have not been able to resolve my problem using them.
I have a bunch of Controls inside a WrapPanel and the WrapPanel is inside a ScrollViewer. The ScrollViewer is inside a Grid.
I am trying to get all the <Border> controls in the WrapPanel to have an Orientation of 'Vertical' (so that they flow down and when there is no more space left vertically they wrap horizontally) with a HorizontalScrollBar that appears when there is no more space left Horizontally.
My code so far is as follows:
<Grid x:Name="configGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Width="{Binding ElementName=configGrid, Path=ActualWidth}" Height="{Binding ElementName=configGrid, Path=ActualHeight}">
<WrapPanel HorizontalAlignment="Left" Orientation="Vertical" x:Name="ConfigWrapPanel" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}">
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="General">
// some controls here
</Expander>
</Border>
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="Another Block">
// some controls here
</Expander>
</Border>
// many more <border> blocks here....
</WrapPanel>
</ScrollViewer>
</Grid>
This almost works as expected, the various content flows vertically and when there is not enough room at the bottom it moves up and right and starts at the top again. But I never get any horizontal scrollbars and the controls just disappear off the right of the screen.
I'm sure this is something really simple I'm missing but I can't quite figure it out.
As a bit of further info, the various Border controls and sub elements are all of dynamic width and height (which is why I opted for a vertical orientation WrapPanel rather than Horizontal)
Any help would be greatly appreciated.
You have to remove the Width from your WrapPanel.
That width wants to stretch to infinity, which prevents the ScrollViewer from corrent measuring the boundaries of the WrapPanel resulting in never showing the ScrollBar.
Code below shows a working example:
<Grid x:Name="configGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Height="{Binding ElementName=configGrid, Path=ActualHeight}">
<WrapPanel HorizontalAlignment="Left" Orientation="Vertical" x:Name="ConfigWrapPanel" >
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="General">
// some controls here
</Expander>
</Border>
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="Another Block">
// some controls here
</Expander>
</Border>
</WrapPanel>
</ScrollViewer>
</Grid>
I'm trying to show text in page of application in 3 textblocks. I want to scroll this because the text is dynamically changed and it depends on what we choose in previous page. When I did this like that:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="Asystent Barmana" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Name="PageName" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<ScrollViewer Name="Scroller" HorizontalAlignment="Center" Height="auto" Margin="12,10,10,-1055" Grid.Row="1" VerticalAlignment="Top" Width="460" ManipulationMode="Control" MaxHeight="2500" >
<StackPanel HorizontalAlignment="Left" Height="auto" VerticalAlignment="Top" Width="460">
<TextBlock Name="MissingSkladnik" TextWrapping="Wrap" Height="auto" FontSize="24"/>
<TextBlock Name="Skladniki" TextWrapping="Wrap" Height="auto" FontSize="24"/>
<TextBlock Name="Przepis" TextWrapping="Wrap" Height="auto" FontSize="24"/>
</StackPanel>
</ScrollViewer>
</Grid>
and the text is not so long it work fine. But in several cases the text is longer and some of text is cut off. When I change StackPanel height to, let's say 1950, it dispaly fine, but when I have shorter text, on the end of page is a black nothing to scroll :/
Any thoughts?
PS. I apologize for my english, it's been a while since I used it ;)
Edit:
I read comments and I change stackpanel to grid. I did it like that:
<ScrollViewer Name="Scroller" HorizontalAlignment="Center" Height="auto" Margin="12,10,10,-1055" Grid.Row="1" VerticalAlignment="Top" Width="460" ManipulationMode="Control" MaxHeight="2500" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Name="MissingSkladnik" TextWrapping="Wrap" Height="auto" FontSize="24" Grid.Row="0"/>
<TextBlock Name="Skladniki" TextWrapping="Wrap" Height="auto" FontSize="24" Grid.Row="1"/>
<TextBlock Name="Przepis" TextWrapping="Wrap" Height="auto" FontSize="24" Grid.Row="2"/>
</Grid>
</ScrollViewer>
It doesn't work either. If I set the height of stackpanel it works, but when there is small amount of text it doesn't look nice. User can srcoll black empty screen :/
A StackPanel will not resize its content in the same way that a Canvas will not resize its content. However, a Grid control can resize its contents. Try replacing this:
<StackPanel Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="Asystent Barmana" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Name="PageName" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
with this:
<Grid Name="TitleGrid" Grid.Row="0" Margin="12,17,0,28">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Text="Asystent Barmana"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Grid.Row="1" Name="PageName" Text="page name" Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</Grid>
UPDATE >>>
In WPF, setting explicit Height and/or Width dimensions and/or Margins will stop a Control from sizing itself. If you want the ScrollViewer to re-size itself to the size of its content, try remove the explicit layout and dimension values that you have set, eg. Margin.
The following simple XAML puts a border on the base of a grid inside a scroll viewer and links the grid's width to the value of a slider.
<Window x:Class="BorderWidth.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DrawBorder">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid Height="100" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding Value, ElementName=slider}">
<Border BorderBrush="Gray" BorderThickness="0,0,0,1"/>
</Grid>
</ScrollViewer>
<TextBox Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Value, ElementName=slider}"/>
<Slider x:Name="slider" Minimum="124000" Maximum="126000" Grid.Row="2" VerticalAlignment="Center" Margin="10"/>
</Grid>
</Window>
While the width is less than 125000 the border shows, but after that value it vanishes. There is no maximum width mentioned in the documentation for the border control and the maximum width for a control in general is documented to lie somewhere between Single.MaxValue and Double.MaxValue, i.e. far far larger than 125000. Is this 125000 upper bound a bug; or is it documented somewhere?
In the following XAML, I am trying to wrap the TextBlock which binds to "PortfolioCodes" and "CommentaryText" but it seems that "Wrapping" doesn't work for TextBlock. I tried every possible suggestion I could find on this web site but all in vain. Can someone please help.
<Grid>
<ListBox ItemsSource="{Binding Path=Summaries}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Border CornerRadius="5" BorderBrush="LightGray" BorderThickness="1" Padding="4" Margin="4">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="15"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">No Of Security</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0" Text="{Binding Path=PortfolioSecurityCount}"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1">Portfolio Code(s)</TextBlock>
<Grid Grid.Column="2" Grid.Row="1" >
<TextBlock TextWrapping="Wrap" Text="{Binding Path=PortfolioCodes}"></TextBlock>
</Grid>
<TextBlock Grid.Column="0" Grid.Row="2">Commentary Text</TextBlock>
<Grid Grid.Column="2" Grid.Row="2" >
<TextBlock Grid.Column="2" Grid.Row="2" TextWrapping="Wrap" Text="{Binding Path=CommentaryText}"></TextBlock>
</Grid>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Based on Guge response, I have changed xaml as below and now its working.
<Grid x:Name="LayoutRoot">
<ListBox x:Name="SummaryListBox" ItemsSource="{Binding Path=Summaries}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Border CornerRadius="5" BorderBrush="LightGray" BorderThickness="1" Padding="4" Margin="4">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="15"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">No Of Security</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0" Text="{Binding Path=PortfolioSecurityCount}"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1">Portfolio Code(s)</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1" TextWrapping="Wrap" Text="{Binding Path=PortfolioCodes}" ></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="2">Commentary Text</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="2" TextWrapping="Wrap" Text="{Binding Path=CommentaryText}"></TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Change the width of your third ColumnDefinition from "Auto" to "*", that way it only takes up whatever is left of your horizontal space.
To try to explain this:
Screen area in WPF is distributed in a two pass algorithm. First each visual element asks each child how much space it needs, with an indication of how much is available. These children do the same for their children.
Then each visual element tells each child how much they are actually going to get. These children, again, do the same for their children.
Your code failed to do what you wanted because the Grid in the DataTemplate told its third column children they could have all the horizontal space they wanted ("auto") in the first run. Those textboxes then thought that they wouldn't have to wrap. So they just reported back their desired width, and one line worth of height.
In the second run the Grid found that "auto" turned out to be a little less than what those children wanted. And the Grid still only gave them one line worth of height, so wrapping was out of the question. The children then had no other option left to them but to truncate the text.
When the third column width is set to "*", the grid will tell the children in the that column exactly how many horizontal pixels are left after the first column got their "auto" and the second column got their 15. Now the textboxes can figure out that they may want to wrap, and they report back "Ok, Dad, I'll make do with those measly horizontal pixels, but at least give me what I want in verticals". There is no limit to the vertical space, so they get what they need to present all their glorious content.
Try to give width to your TextBlock, by default TextBlock takes all available space and doesn't wrap text