I've got a Grid that is dynamically sized based on the size of the window it is in. The grid has three children: an Image, a RichTextBlock, and a RichTextBlockOverflow. When the window is sized down enough to ensure that the height of the RichTextBlock becomes 0, the overflow content does not include the first line (which the RichTextBlock couldn't visibly render.
In the sample code below (reduced to just show the essentials), I only see "World" in my overflow.
<Grid MinHeight="200" MinWidth="400">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image />
<RichTextBlock x:Name="Text" Grid.Row="1" OverflowContentTarget="{Binding ElementName=OverflowText}">
<Paragraph>Hello<LineBreak />World</Paragraph>
</RichTextBlock>
<RichTextBlockOverflow Name="OverflowText" Grid.RowSpan="2" Grid.Column="1" />
</Grid>
Is there any way to ensure that the overflow would have all the text in case the RichTextBlock doesn't have enough space to render the first line?
Related
this is a simple grid with a tiny button in it:
<!--ReverseButton-->
<Grid Grid.Row="1" RowSpacing="0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ImageButton
Source="btn_reversed_unpressed"
x:Name="btn_reverse_list_mainmenu"
BackgroundColor="#00000000"
Grid.Column="1"
Clicked="ReverseListForSwipeView"
/>
</Grid>
The size of this Row (row 1) is set here:
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="0.17*" />
<RowDefinition Height="4.5*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
I set the value to 0.17* to have the button always be very tiny. If i would set the row to "auto" the icon would become much bigger (since the source image is bigger in size)
If I make the size to, lets say 0.25* instead of 0.17* the row and therefore the button both get bigger and everything is fine. (Except now it is too big)
But with size 0.17* it is just about right... Well except for this:
It is quite hard to see, but the icon at the bottom is cut of slightly. The border is not as big as it is on the top.
This I have noticed quite some time now.
I tried setting the rowspacing to 0 or even negative values, but nothing worked.
Why is the icon cut off.
The top part isnt cut and both parts (top and bottom) touch the row end and beginning pixel perfect.
An answer based on my comment above. I suggest setting the HeightRequest of the ImageButton to the size you want the icon to be and then just set the row height to Auto and let the layout manager do the rest. See my example where I create a Grid with 3 rows set to Auto size and then just use the HeightRequest property to have it draw at the correct size. I left the grey background of the button in so you can see how the row sizes dynamically.
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="0" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="75"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="1" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="100"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="2" />
</Grid>
</ContentPage.Content>
Gives the following:
I have a proble which seems pretty common and has been asked alot, but I can't find a fixing solution for my problem.
So I try to use 3 listviews in in one page all shall have a title and an explaining image, but instead of designing all 3 ListViews in one page I outsourced one listview with image and title into a control, which I use in my page.
The 3 Controls are placed in a grid. When the listview items get filled thy scrollbar should become visible if the remaining space is no longer enough but it won't show.
I provided a sandbox project where I placed the control and etc. like in the application I'm working on. SampleProject
Their you just need to press start and the listviews get filled. But they don't show the scrollbar.
Thanks in advance!
Edit 1:
As requested I share my code below. If you open up the sample project then you do not need to read further until a second edit is done.
Control containing listview:
<Grid>
<Grid x:Name="Section"
HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="grdTitleArea"
HorizontalAlignment="Stretch"
Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BitmapIcon
VerticalAlignment="Center"
HorizontalAlignment="Center"
Tapped="grdTitleArea_Tapped"
UriSource="ms-appx:///Assets/area.png"
Height="40" />
<TextBlock
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Tapped="grdTitleArea_Tapped"
Text="Area"
Grid.Column="1" />
</Grid>
<!--<ScrollViewer
VerticalAlignment="Stretch"
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Enabled"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
HorizontalScrollBarVisibility="Hidden"
HorizontalScrollMode="Disabled"
>-->
<ListView x:Name="ListView"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollMode="Auto"
Grid.Row="1">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
BorderThickness="1"
Margin="1"
Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ActionDescription}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--</ScrollViewer>-->
</Grid>
</Grid>
Control which contains the control above 3 times:
<Grid x:Name="ProgressControl">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<local:SynchronizeSettingsControl
Visibility="Visible"
x:Name="Settings" />
<local:SynchronizeSectionControl
x:Name="ActualAction"
Visibility="Visible"
Grid.Row="1" />
<local:SynchronizeSectionControl
x:Name="Error"
Visibility="Visible"
Grid.Row="2" />
<local:SynchronizeSectionControl
x:Name="Log"
Visibility="Visible"
Grid.Row="3" />
</Grid>
Page which contains the control which contains the listview:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1"
Text="Demo"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Width="70"
VerticalAlignment="Stretch"
Content="Useless Button" />
</Grid>
<Controls:SynchronizeControl
x:Name="ctlSync"
Grid.Row="2"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" />
<Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
x:Name="btnStart"
Content="Start"
Tapped="btnStart_Tapped"
Grid.Row="3" />
</Grid>
The problem is you used Auto height in the page. This means basically that the page tells the local:SynchronizeSectionControl control: "You can use whichever height you want".
The control then has * as the height of the second row which means "use the rest space available". But because the page offered essentially "infinite height", the ListView height will stretch as much as possible to accommodate for all its items and hence it doesn't scroll, as its height is big enough to display everything, although it is cut off and not visible, because the window height is of course limited.
The thing is you used the Auto property for the height of your rows in your control.
This works fine is the control you use uses a definite space. Like a button or similar stuff. But when the control can extend indefinitely the allocation for the space gets screwed up.
Basically the control displays at its maximum size but extends way over its boundaries.
You can prevent that when you use the * as a Height value.
This will lead to the control taking up all the space available. You can further limit this with using the MaxHeight property.
If you do it that way it will display a scrollviewer when necessary and it will even resize when you change the window size.
I am trying to create a windows 8.1 application and wanted to know that is there a control that allows me to create something like popup or messagebox in XAML that covers about 80% of the screen with some margin on either sides of the screen? Like when we click on a button and the screen's brightness gets dim except for the popup that is opened. As an example I have attached an image.Example from windows settings
Other than MessageBox there isn't an in-box control which does this. It's fairly easy to implement yourself in Xaml by creating a Grid with a partially opaque background and your controls in the middle of three rows. In this implementation the rows and columns will size to the controls placed in the center. You could also set those sizes more directly if you prefer.
<Grid Background="{ThemeResource DimmedBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Coloured background for the center row -->
<Rectangle Grid.Row="1" Grid.ColumnSpan="3" Fill="{ThemeResource AppThemeBrush}" />
<!-- User control with the contents in the center row + column -->
<local:MyControls Grid.Row="1" Grid.Column="1" />
</Grid>
There are third party libraries which include controls like this. For example see Callisto's CustomDialog.
I have some XAML code containing a grid with three columns. In these columns I added three buttons with images. When I increase the width of the screen, the second and third images move evenly towards the right but the first image, the leftmost one, stays put and does not move. It's like its left edge stays stuck to the left and does not move slowly towards the right when I expand the width of the screen.
Here is my code. I cannot figure out how to do this. Sorry I had to use an image, I'm getting the code from my VM.
That's because you didn't bother to set the HorizontalAlignement ofthe buttons,
the default value is Left, that's why the first button wont move, set it to Center
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" HorizontalAlignment="Center">
<Image Source="img.png" Stretch="None"></Image>
</Button>
<Button Grid.Column="1" HorizontalAlignment="Center">
<Image Source="img.png" Stretch="None"></Image>
</Button>
<Button Grid.Column="2" HorizontalAlignment="Center">
<Image Source="img.png" Stretch="None"></Image>
</Button>
</Grid>
I'm using TextLineBounds in Windows 8.1 to align text of different font sizes on the baseline, such as
With the XAML looking like:
<Grid x:Name="PageHeader">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1"
VerticalAlignment="Bottom"
TextLineBounds="TrimToBaseline"
FontSize="50"
Text="OOO Big Font" />
<TextBlock Grid.Column="3"
VerticalAlignment="Bottom"
TextLineBounds="TrimToBaseline"
FontSize="26"
Text="OOO SmallerFont" />
<TextBlock Grid.Column="5"
VerticalAlignment="Bottom"
TextLineBounds="TrimToBaseline"
FontSize="20"
Text="OOO Even Smaller Font" />
</Grid>
</Grid>
When I resize the window, at some point (before the minimum size of 500) the descenders are clipped (and I've also seen the bottom pixel or two across entire line get clipped even when there are no descenders - resulting in artifacts like a flattened O).
The display elements do not change on the resize, there's no modification due to visual state, etc.
It seems like a bug, but not sure if there's a workaround (other than to abandon use of TextLineBounds).