I was wondering if anyone else is experiencing this issue with the latest .Net maui preview(Version 17.2.0 Preview 1.0)
<CollectionView ItemsSource="{Binding EventList}" x:Name="Events_CollectionView" ItemsLayout="VerticalList" SelectionMode="Single">
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame>
<StackLayout Margin="0,0,0,0">
<Label Text="{Binding Seconds}" FontSize="35" FontAttributes="Bold" TextColor="White" HorizontalOptions="End"/>
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
This displays the seconds of my countdown and gets updated every second. The result:
You can see the edge of the screen and where it gets cut off.
Here is an example when the frame is removed leaving just the stack layout in the data template:
Edit:
It appears not to just apply to frames but when I have a stacklayout inside of a stacklayout in the collectionview it appears to produce a similar result.
It seems that adding a width request to the Label allowed the full text to be displayed.
Related
I have an Editor control inside ListView. If the text is larger than Editor height, I want to be able to scroll the Editor without clicking inside the Editor. But ListView scroll only working, Editor scroll not working.
<ListView
x:Name="listProjects"
HasUnevenRows="true"
SeparatorVisibility="None"
ItemsSource="{Binding Feedbacks}"
HorizontalOptions="FillAndExpand"
ItemTapped="Handle_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,15,15,15" BackgroundColor="Transparent">
<Editor HeightRequest="50" FontSize="Small"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can use a ScrollView to wrap the Editorlike following code.
<ScrollView HeightRequest="50">
<Editor Text="22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222" ></Editor>
</ScrollView>
Here is running GIF.
And please update Xamarin forms nuget packages to 4.7.0.1179 or later.
I am a beginner in xamarin.forms. I am using Xamarin.forms Absolute layout for identifying the message count. When in potrait mode, it works fine. In landscape mode, it is giving an enlarged icon. Is there a way we can change this ? Please suggest .
Here is my Xaml file:
<effect:BudocodeButton x:Name="chatMsgCnt" AbsoluteLayout.LayoutBounds=".9,0,.4,.9" BorderRadius="12"
AbsoluteLayout.LayoutFlags="PositionProportional,SizeProportional" BackgroundColor="Red" TextColor="White" FontSize="Medium" Text="{Binding ChatMsgCount}" FontAttributes="Bold" >
landscapeimg
potraitimage
Make your hight and the width static for the view and set AbsoluteLayout.LayoutFlags to X&Y Proportional.
Code:
<effect:BudocodeButton
x:Name="chatMsgCnt"
AbsoluteLayout.LayoutBounds=".9,0,60,60"
BorderRadius="12"
AbsoluteLayout.LayoutFlags="XProportional,YProportional"
BackgroundColor="Red"
TextColor="White"
FontSize="Medium"
Text="{Binding ChatMsgCount}"
FontAttributes="Bold">
I've heard a couple things about ListView.
it takes up the full height of its container
on iOS it just goes ahead and adds empty rows until it takes up the full height
you have to use HasUnevenRows=True to be able to set its height even if all your rows are the same height.
It sure would be great if there were a way to get ListView to not display those extra empty rows though, right? Well, that's what I am trying to do.
<ListView
BackgroundColor="Green"
ItemsSource="{Binding Things}"
HasUnevenRows="True"
HeightRequest="5"> <!-- In the real code I am setting this in a ValueConverter. It's hard coded here for simplicity. -->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="This is text." />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Except I don't even know what it could possibly be doing. Here I use HeightRequest=5 and HeightRequest=50 there is a difference. But I can't tell what it is.
What's going on here?
Now this is a very interesting question. We have had similar issues with ListViews as unfortunately that unlimited scrolling is actually a standard behaviour on iOS, so you have to think of way around it. The way we have done it is basically count the amount of items within the list, this is pretty straight forward, because you only have to call for ListOfItems.Count. Next thing you want to do, you want to get the Height of your Single DataTemplate item. When you do that then just multiple count of your items by Height of single item and set that Value to HeightRequest. It is not ideal, but it does a job.
I understand why this works. What I don't understand is why the 50 other ways I tried did not work. So from that point of view I have no idea why this works.
Wrap it in a StackLayout:
<StackLayout>
<ListView
BackgroundColor="Green"
ItemsSource="{Binding Things}"
HasUnevenRows="True"
HeightRequest="5"> <!-- In the real code I am setting this in a ValueConverter. It's hard coded here for simplicity. -->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="This is text." />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
It might seem relevant at first but I'm not sure. My ListView was in a grid so it had
<ListView
Grid.Row="1"
Grid.Column="1"
... />
Which got moved into the StackLayout. Again, I know that seems glaringly relevant but I have my doubts. Unfortunately I don't have the time to rip everything out just to test that idea out.
I've got a page design as follows:
The layout is as follows:
<ScrollViewer Margin="0" HorizontalAlignment="Left" Height="360" VerticalAlignment="Bottom">
<StackPanel x:Name="spQueuedWeapons" HorizontalAlignment="Left" VerticalAlignment="Bottom">
<ItemsControl ItemsSource="{Binding QueuedCombinations}" HorizontalAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImageName}">
<i:Interaction.Behaviors>
<ex:MouseDragElementBehavior ConstrainToParentBounds="False" />
</i:Interaction.Behaviors>
</Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
The problem I'm seeing is that the MouseDragElementBehavior seems to be visually constrained to the bounds of the ScrollViewer.
I want to be able to drag the green boxes to the blue drop target.
The only options I've thought of so far have been to remove the containing ScrollViewer or to simulate the StackPanel layout programmatically.
I'd rather not add manual button based scrolling or programmatic layout if possible.
Does anyone have any ideas?
I have this code in my .xaml file
<ListBox Name="Tracks" Margin="0,0,-12,0" ItemsSource="{Binding AllTracks}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="150">
<TextBlock Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Artist}" TextWrapping="NoWrap" Margin="12,-3,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding Album}" TextWrapping="NoWrap" Margin="12,3,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding Duration}" TextWrapping="NoWrap" Margin="12,6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I put data in my list like that(MediaLibrary library = new MediaLibrary();
Tracks.ItemsSource = library.Songs;).
I can see data on my list but when i select something, the selection doesn't highlighted,
how i can fix it? Thanks...
The phone applies the Accent colour as Foreground to the selected element's VisualTree. But since you're overriding the style for all the elements, it's likely that the colour won't be applied.
Try with a regular TextBlock without any Style, and you'll see.
Here: Windows Phone 7 - Setting style for specific control within selected ListBoxItem I've written a bit in response to a similar problem. Please read at least the original post/problem and my answer to it. It may look overwhelming at first as there's not a small amount of extra XAML, but in fact it is quite easy to follow and once you look at it as a several different aspects (template, styles, visualstates) - it turns out to be .. quite short, paradoxically. Once you read through it, you will probably notice that your problem is almost exactly the same, with the minor difference that the 'animated' property/target from foreground of textbox to a background of the panel..