I have a Label inside a StackLayout inside a Frame:
<Frame Grid.Row="0" Margin="0, 0, -10, 0" OutlineColor="Transparent" HasShadow="False" Grid.Column="1" BackgroundColor="{StaticResource rightBubbleColor}">
<StackLayout>
<Label
Style="{StaticResource rightBubbleStyle}"
TextColor="{StaticResource rightBubbleFontColor}"
Text="{Binding message}" />
</StackLayout>
</Frame>
This gives me this result:
The problem here is that the last message actually has more text which would need 6 rows to display the whole text.
If I set a value for HeightRequest for the Label, it changes the height of the Frame as well. For example if I set a value of 150, I get this result:
I need to dynamically set a value for HeightRequest depending on how much height the Text needs.
Does anyone know how I can achieve that (preferably in xaml) or is this even a wrong approach to my problem?
Edit 1:
Removing the style from the Label doesn't solve the problem. It only occurs on UWP. Note that I don't have a Windows Phone to test it, the problem occurs on my local machine (Windows 10 Desktop).
Edit 2:
According to the Xamarin documentation, the height should be autosized dependon on the content:
When the app developer sets the ListView.HasUnevenRows property to true, the behavior of the list view still depends on the ListView.RowHeight property. First, if the developer either does not set the ListView.RowHeight property or sets it to -1, list view items are autosized to fit their contents. This is the desired behavior and the intended use case for a ListView.HasUnevenRows value of true, as noted above.
I found a solution. This was the problem:
<RowDefinition Height="*" />
I set the value to Auto and now it's working. Strange that it has a different behaviour on iOS and Android tho.
Related
I need advice. There is some way in PopupPage to make content InputTransparent = "True".
I'm trying to create an inputtransparent content pop-up page.
Unfortunately, InputTransparent = "True" does not work for x: Name = "GridRoot" in PopUpPage. It should go click on the Button in MainPage.
I have the following XAML code here:
here is the code-behind:
PopUpTest.cs
Use RowDefinitions to explicitly say what areas are NOT part of the clickable content.
<Grid RowDefinitions="*,Auto,*" InputTransparent="True" CascadeInputTransparent="False" >
<Grid Grid.Row="1" BackgroundColor="Red">
...
</Grid>
</Grid>
This makes an outer 3-row grid. Inside that, on the second row (Row=1) is your visible content. Surrounded by Rows 0 and 2, which divide the extra space between them - but have no content, so they should not block input.
I don't think you need to put anything in rows 0 and 2, but if the above doesn't work, try:
...
<BoxView Grid.Row="0" VerticalOptions="Fill" InputTransparent="True" />
<Grid Grid.Row="1" BackgroundColor="Red">
...
</Grid>
<BoxView Grid.Row="2" VerticalOptions="Fill" InputTransparent="True" />
I don't know if the BoxView's need HeightRequest attributes. If above doesn't work, try adding HeightRequest="999" to them. The Grid logic will limit each BoxView's height to fit in its row.
I've following situation.
<ScrollView BackgroundColor="DeepPink">
...
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ContentView Opacity="{Binding ViewProvider.IsCancelling, Converter={StaticResource BoolToOpacityConverter}}" Content="{Binding ViewProvider.CurrentView}"/>
</Grid>
...
</ScrollView>
The Content View contains multiple elements and one of them is a StackLayout with BindableLayout.ItemsSource
<StackLayout BindableLayout.ItemsSource="{Binding Rings}" Margin="12,0,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
The Rings will be added by different actions while the View is open. As soon as this happens, the height of the ScrollViewer increases, but the parts below are cut off or just not rendered. (It cut's the height off, which the rings are using - I guess because the Grid doesn't resize? But why?)
I've tried to call InvalidateMeasure() and ForceLayout() after adding rings but without any changes. Any ideas?
Edit
As requested in the comments I've uploaded a simple demo on github to reproduce this issue.
https://github.com/Valronicon/ScrollViewerIssue
Thank you!
Edit 2
I was able to fix this by wrapping the ScrollViewer within an additional Grid. Don't know why it works, but it works...
As Rich Mentioned wrapping the scrollview in a grid seemed to solve this issue for me as well, so im posting it as an answer
<Grid>
<ScrollView>
...
</ScrollView>
</Grid>
Recently I changed a collectionview by setting its VerticalItemSpacing property to have a preseted value, it seemed to work fine but just noticed that when some new element is added, the spacing between it and penultimate one is zero until I scroll the view. When I back to the last element again, the space between them appears. Is this a known issue? some one knows a fix for that?
my data templates are grids with boxviews inside(for simulating a background since frames were seeing to be more expensive) and this is my ItemsLayout property:
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" VerticalItemSpacing="3" />
</CollectionView.ItemsLayout>
This issue is related to your DataTemplate name of MapMsgSend, please check this line
<BoxView Margin="-5,-5,-5,-1" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="3" CornerRadius="5" BackgroundColor="#dcf8c6" />
If you set the Margin to "-5,-5,-5,-1" , it will get the result like this screenshot.
If I set the margin to Margin="3" it worked like following sceenshot.
in a UWP application I have a button its Background property is set to "DeepPink", but whenever I hover my mouse over it, it changes to gray (the default color),
here is my code:
<Button Content="Hello World" Margin="100,0,0,0" Background="DeepPink"/>
Am I missing something??
That only defines the default state of the button, not the hover state.
You can either create a custom control template (you can see an example here), or go the easy way of changing colors with Lightweight styling - I'd recommend the second!
The best alternative would be to create Buttons like UI using Frame and Label. In this case, the background color will remain the same.
Example:
<Frame Padding="8" WidthRequest="100" HasShadow="False" BorderColor="Gray"
HorizontalOptions="Center">
<Label Text="Button" HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>
The following XAML shows the content of a Windows Phone 8.1 Universal app page. The idea is to have a bar on top of a pivot. But the pivot is overlapping the bar whereas the sample grid in blue is working as expected.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Background="{StaticResource PhoneAccentBrush}" Height="50" />
<Pivot Grid.Row="1" Background="Green" Width="200" HorizontalAlignment="Left" />
<Grid Grid.Row="1" Background="Blue" Width="200" HorizontalAlignment="Right" />
</Grid>
The resulting Page looks like this:
Where is this "negative margin" coming from?
How can it be avoided?
BTW: Just setting a margin is not a solution as it introduces other problems, for example a jumping GUI when using a SemanticZoom control, I need to know the root cause of the problem to solve it...
Info: It seems that the Windows Phone Pivot automatically changes the margin depending on the current screen settings (status bar shown/hidden). So if your app changes the state of the status bar in some circumstances you will end up having a jumping/changing pivot control.
I've found a solution and created a simple attached property for the Pivot control.
The attached property can be used this way:
<Pivot controls:PivotExtensions.DisableAutoMargin="True">
<PivotItem Header="A">
...
</PivotItem>
<PivotItem Header="B">
...
</PivotItem>
</Pivot>
The class with the attached property can be found here:
http://mytoolkit.codeplex.com/SourceControl/latest#MyToolkit.Extended.WinRT/Controls/PivotExtensions.cs
Downside: You cannot override the template anymore as the attached property changes the template already...
Overriding the control template doesn't seem to work; there is some code in the control that's setting the margin after construction. Also setting the Margin on the offending grid on the Loaded event doesn't work either, the negative margin code runs after that.
The only way I found to make the odd behavior go away was to ask your UI to overlap the status bar:
ApplicationView.GetForCurrentView()
.SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);
Then the Pivot control figures that it doesn't need to try and cover the status bar. Note that you'll now have to give room in your page layout to prevent overlap with the status bar.