I have a button within my CollectionView Footer that reaches the ends of the screen horizontally. I want to be able to set the width either to the size of the text, or to a width I pick.
Changing HorizontalOptions does nothing. I've been messing around with :
WidthRequest
MinimumWidthRequest
HeightRequest
MinimumHeightRequest
These options only affect button height.
As a workaround, you can set a grid in footer, then set the width and height of grid ,code like:
<CollectionView.Footer>
//width&height
<Grid ColumnDefinitions="*,100,*"
RowDefinitions="50">
<Button Grid.Column="1",Text="Click" BackgroundColor="Red"/>
</Grid>
</CollectionView.Footer>
Related
I created below code with ScrollView in .NET MAUI, when trying to scroll nothing happens. Any help would be appreciated.
<ContentPage.Content>
<StackLayout>
<!-- <local:NavigationControl x:Name="_accountPage"/> -->
<ScrollView VerticalScrollBarVisibility="Always">
<StackLayout Margin="5" Spacing="20">
--- some content
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Regards,
Ali
The scroll view vertical options need to be FillAndExpand
Try this
<ContentPage.Content>
<ScrollView VerticalScrollBarVisibility="Always">
<StackLayout>
<!-- <local:NavigationControl x:Name="_accountPage"/> -->
<StackLayout Margin="5" Spacing="20">
--- some content
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
scrollview have a size is scrollview's size, it also have a size is child size, when child size is biger than scrollview size, it need scroll. But when scrollview in stacklayout, stacklayout determine size according to child itself size, so scrollview size = child size, so you don't need scroll. That mean you need give a size to scrollview, or set it on other layout, such as Grid, Grid size is fixed,it will give child a fixed size.
Is it Android where your scrollview is not working? If so this issue has been noted here:
ScrollView doesn't work properly on Android. #7590
It suggests that it's been fixed in a service release. I have not seen that fix come to fruition yet - maybe we're still waiting for that next service release.
I also came across this issue while update a program to MAUI. I looked into the Microsoft documentation # https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/scrollview?view=net-maui-7.0
Within this I found the following:
ScrollView as a child layout
A ScrollView can be a child layout to a different parent layout.
A ScrollView will often be the child of a Grid. A ScrollView requires a specific height to compute the difference between the height of its content and its own height, with the difference being the amount that the ScrollView can scroll its content. When a ScrollView is the child of a Grid, it doesn't receive a specific height. The Grid wants the ScrollView to be as short as possible, which is either the height of the ScrollView contents or zero. To handle this scenario, the RowDefinition of the Grid row that contains the ScrollView should be set to *. This will cause the Grid to give the ScrollView all the extra space not required by the other children, and the ScrollView will then have a specific heigh
So in the end I moved by ScrollView from a stack like referenced in the code above into a grid with a row height of * for the ScrollView and auto for my other componence.
Problem
I'm using a NavigationView in my UWP application with the the PaneDisplayMode property set to Top. I've added a few menu items, but I'm having trouble adjusting the top pane's height to fit the menu items. At the moment, the pane items are getting cropped.
What Have I Tried?
I've tried to adjust the NavigationView's Height property, but it has no effect on the height of the top bar, only changing the height of the entire NavigationView (as one would expect).
Code
Here is my current XAML code:
<NavigationView
x:Name="navMain"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False"
IsTabStop="False"
PaneDisplayMode="Top">
<NavigationView.MenuItems>
<NavigationViewItem
Content="ITEM 1"
FontSize="60"
Tag="Page1" />
<NavigationViewItem
Content="ITEM2"
FontSize="60"
Tag="Page2" />
<NavigationViewItem
Content="ITEM 3"
FontSize="60"
Tag="Page3" />
</NavigationView.MenuItems>
</NavigationView>
Desired Result
I would like to adjust the top pane's height, preferably using only XAML, so that the menu items can fit and not be cropped.
All you need to do is override NavigationViewTopPaneHeight using lightweight styling, like this (you don't need to re-template the control):
<muxc:NavigationView.Resources>
<x:Double x:Key="NavigationViewTopPaneHeight">100</x:Double>
</muxc:NavigationView.Resources>
This issue is due to the default height of NavigationViewTopPane is 40. You set the FontSize="60" for the NavigationViewItem is too larger.
To solve this issue, you need to edit the ControlTemplate of NavigationView. An easy way is to follow the Use tools to work with themes easily document to edit a copy NavigationView style.
Then, you need to find a Grid named 'TopNavGrid' in the ControlTemplate. The default looks like this <Grid x:Name="TopNavGrid" Height="{ThemeResource NavigationViewTopPaneHeight}" ..., you need to change the height to an appropriate value. For example, <Grid x:Name="TopNavGrid" Height="100" .... Then, the menu items will not be cropped.
I have added a rating control in xaml but i don't know how to set it's width and height.Already it has the property width and height but it actually setting the width and height of the border around it.
<RatingControl x:Name="rating control" width="200" height="200">
<SolidColorBrush x:Key="RatingControlSelectedForeground" Color="Red" />
</RatingControl>
I have a question on Windows Phone 7 XAML programming.
<StackPanel Orientation="Vertical" Width="110">
<Canvas Margin="0">
<TextBlock Text="{Binding Menesis}" Foreground="{Binding MyColor}"></TextBlock>
</Canvas>
<Canvas Margin="0,12,0,0">
<TextBlock Text="{Binding Datums}" Foreground="{Binding MyColor}" FontSize="85" HorizontalAlignment="Center" TextAlignment="Center" />
</Canvas>
<Canvas Margin="0,105,0,0">
<TextBlock Text="{Binding Nedelas_diena}" Foreground="{Binding MyColor}" />
</Canvas>
</StackPanel>
How to make TextBlock (Binding Datums) text centered? Currently it is aligned at right side and
HorizontalAlignment="Center"
or
TextAlignment="Center"
doesn't work.
If you have your TextBlock in a Canvas you will have problems with the alignment as the TextBlack will be placed at 0,0 (top left) inside the canvas control and (unless you set the width explicitly) will be stretched to fit the text contained. This basically means your text will always be left aligned.
The Canvas control should only be used when you need to set the exact position of the contained elements. If this is not the case then use another container such as a Grid, StackPanel or even just a ContentControl.
Remove the Canvas from your xaml and it should work.
To clarify HorizontalAlignment vs. TextAlignment:
If you have a ContentControl that is 400px wide and you add a TextBlock to it that is set to be 200px wide with text content that is 100px wide, then the following is true:
Setting the HorizontalAlignment to Center will align the TextBlock (200px wide) to the middle of the ContentControl but the text will still be left aligned within the TextBlock. This means the text will be offset 100px from the left.
If just the TextAlignment is set to Center then the TextBlock will be left-aligned but the text inside will be centered. This means that the text will be offset 50px from the left.
In my opinion the best practise here is not to set any widths and just set the TextAlignment property. This will mean (for most containers) the TextBlock will be stretched the entire width of the container and the text within aligned appropriately.
Instead of using stack panel and canvas . either u can use Grid. If you are using grid you can point out the exact position where you need to place the control.
for eg,
<----- Height -->
like this. More over there is no need to use canvas. The canvas container is using mainly in case of game design purpose.
I have a grid with 3 rows, in my top row (200px height) i want a text on a blue background. How do i specify that my textblock should fill the space? when i add it it only fits the space the text occupy. Tried with a ViewBox, but that resized the text also, i want that to be a fixed size...
anyone?
This code is an example of size autofill for 3 different controls in given grid in XAML. Autofill is default, so you don't need to set anything additional, just make sure margin is not set. I tested this solution in MS Expression Blend and it works OK.
<Grid Height="400" Width="250" Canvas.Left="100" Canvas.Top="20">
<Grid.RowDefinitions>
<RowDefinition Height="200*"/>
<RowDefinition Height="100*"/>
<RowDefinition Height="100*"/>
</Grid.RowDefinitions>
<Button Content="Button"/>
<CheckBox Content="CheckBox" Grid.Row="2"/>
<TextBlock Grid.Row="1" Text="Test Text block" TextWrapping="Wrap"/>
</Grid>
Just remove these four properties from the xaml if they are set when TextBlock is defined, or set them to the default values:
HorizontalAlignment (Defaults to Stretch)
VerticalAlignment (Defaults to Stretch)
Width (Default to Auto)
Height (Default to Auto)
Your TextBlock should now auto stretch and fit the row.
Also make sure that your Grid is also wide enough or is set to fit your Window. Your Grid's width might also be the culprit.