Data Templated ListBox not stretching Horizontally - again - listbox

Can't get my horizontal ListBox with 'Data Template' to stretch fully.
I researched this topic and the most popular answer is to set the ItemContainer Style like :
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
This doesn't seem to work for me.
Here is the fully XAML code. The ListBox.ItemsSource = ObservableCollection
<UserControl.Resources>
<ResourceDictionary>
<ItemsPanelTemplate x:Key="ItemsPanel">
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
<DataTemplate x:Key="ItemTemplate">
<Button Margin="-2,-2,-4,-2" >
<StackPanel>
<TextBlock Text="{Binding}"
TextWrapping="Wrap"/>
</StackPanel>
</Button>
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<ListBox VerticalAlignment="Top"
Height="50"
Background="Red"
ItemsPanel="{StaticResource ItemsPanel}"
ItemTemplate="{StaticResource ItemTemplate}"
ItemsSource="{Binding Headers}" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

Unfortunately this is difficult to do if you really want to use data-binding with a ListBox (or in fact any ItemsControl).
The reason is that there is no standard panel that works like a StackPanel but stretches its elements in the layout direction.
I don't even know of any third-party panel that does that (which makes me sometimes wonder what it exactly is that toolkit providers are for). I have a small marker in my mind to write one myself next time I need it, because it's easy to do if you're already familiar with developing panels.
If you are not, you are probably better off with creating a Grid programmatically.
I assume you have a variable number of elements (otherwise you could just define each in xaml and wouldn't need a ListBox).
Instead of using a ListBox with data binding you could also programmatically create ToggleButtons in a Grid along with the GridColumns all set to being star-sized.
Of course you could also just change your design and have the buttons be left-justified.
I know that this is a nuisance, but that's how it is.

Related

fit html based on user screen size using webView in MAUI

In my MAUI application I'm using webview to display my existing static html pages. But it is giving me scrollbars horizontally and vertically. I want my html page to adjust itself based on screen-size of device.
I tried to set MaximumHeightRequest & MaximumWidthRequest but it didn't worked for me. I want to have a dynamic solution for this problem.
Are you looking for this https://github.com/dotnet/maui/issues/8241. Look for #MobileDev327 comments
<ContentPage .....>
<ScrollView>
<Grid>
<Grid>
<Label Text="By default, a Grid contains one row and one column" />
</Grid>
<Grid Padding="0,30,0,0">
<WebView x:Name="jsExampleWebView" Source="Map.html"/>
</Grid>
</Grid>
</ScrollView>
Windows
Android Emulator

Xamarin.Forms: CarouselView not works as expected on iOS

I'm trying to implement CarouselView control with horizontal scroll.
I'm using Xamarin.Forms 5.0.0.2012.
This is the xaml code:
<CarouselView x:Name="carViewArticoliAlt"
Loop="False"
ItemsSource="{Binding ListaProdottiAlt}"
IndicatorView="indicatorView"
IsVisible="{Binding ArticoliAlt}"
HeightRequest="200"
PeekAreaInsets="100">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
SnapPointsAlignment="Start"
SnapPointsType="Mandatory"
ItemSpacing="20" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True" BorderColor="LightGray"
CornerRadius="5" Padding="5"
HeightRequest="310"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" >
<Frame.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped"/>
</Frame.GestureRecognizers>
<Grid>
<StackLayout x:Name="stkArticoloAlt">
<ImageButton x:Name="ImageArt"
Source="{Binding ImageArt}"
Aspect="AspectFit"
HeightRequest="80"
Clicked="ImageArt_Clicked"
BackgroundColor="White"/>
<Label Text="{Binding Descrizione}"
Style="{StaticResource labelDescrizioneStyle}"
MaxLines="3" LineBreakMode="TailTruncation"
HeightRequest="55"
FontSize="15"/>
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center" />
On Android platform the control is well rendered, but on iOS the following exception is thrown: Objective-C exception thrown. Name: NSInternalInconsistencyException Reason: negative sizes are not supported in the flow layout.
I followed this tutorial:
https://learn.microsoft.com/it-it/xamarin/xamarin-forms/user-interface/carouselview/scrolling
I noticed that the cause of the exception is the PeekAreaInsets property. Infact, if I don't handle this property, the exception does not occur. However the control is not drawn correctly, since the tabs are overlapping. Android code keeps on running correctly.
As you can see in the image, the cards are all overlapped, even if LinearItemsLayout.Orientation is set to horizontal.
Name: NSInternalInconsistencyException Reason: negative sizes are not supported in the flow layout.
The error indicates that the child's size( in datatemplate) is bigger than parent layout's size.
<CarouselView x:Name="carViewArticoliAlt"
Loop="False"
ItemsSource="{Binding ListaProdottiAlt}"
IndicatorView="indicatorView"
IsVisible="{Binding ArticoliAlt}"
HeightRequest="200" --------->parent's height
PeekAreaInsets="100">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
SnapPointsAlignment="Start"
SnapPointsType="Mandatory"
ItemSpacing="20" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True" BorderColor="LightGray"
CornerRadius="5" Padding="5"
HeightRequest="310" --------->child's height
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" >
To solve the problem try to remove HeightRequest="200" on CarouselView.
Since the Xamarin.Forms 5 release a new feature has been implemented on the CarouselView: Loop. This seems to be set to True by default and is causing some issues together with the PeakAreaInsets property. I was able to solve/work-around above crash/error by setting Loop="False". Perhaps that also works in your case?

NativeScript: WebView with rounded corners (Android Only)

I want to have rounded corners in my WebView, but apparently the borderRadius directive is ignored in Android
<GridLayout rows="*">
<WebView row="0" id="webView" borderRadius="20 20 0 0"/>
</GridLayout>
Any idea?
This is the desired result:
I solved this problem by using cardview which has top preference on view hierarchy(I don't know what they call officially, I just telling you as view hierarchy to make some sense).
If you know how FAB will get placed on a view. You can understand how this works. For more info you need to dig into these developing-hierarchy (This might be a wrong tutorial, but I got only this)
solution
<Page xmlns:Card="#nstudio/nativescript-cardview">
<StackLayout>
<Card:CardView margin="10" radius="50">
<StackLayout height="500">
<WebView src="https://i.ytimg.com/vi/xRZB5KBLdOA/maxresdefault.jpg" />
</StackLayout>
</Card:CardView>
</StackLayout>
</Page>
For more info on this plugin nativescript-cardview
If you get more info on this share here.

Expression Blend Interaction: How to set Trigger to Look for IsEnabled Value of Button?

I am a designer using Expression Blend 4 and our environment is .NET 3.5.
This issue may be simple to you guys, but it is causing me quite a problem.
I need to apply an interaction to a button that will trigger a state when the button becomes enabled.
On the button, the developer has a Boolean value associated with the IsEnabled property. I have to supply the EventTrigger with an EventName, and the only thing that I can think of is IsEnabledChanged. However, when I run the app, this does nothing.
How do I tell the Trigger to look for a change in the Boolean value of the IsEnabled property of the button?
Here is the code:
<Button x:Name="SaveButton"
Command="{Binding SaveCommand}"
IsEnabled="{Binding IsSaveAllowedBool}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="IsEnabledChanged">
<ic:GoToStateAction StateName="MyState"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
I found a solution to my problem.
I wrapped a ContentControl around the Border element that I am trying to make appear/disappear based on the Boolean value (I did this in order to modify a ControlTemplate - the Border element does not have a ControlTemplate associated with it)
Then I bound the IsEnabled property of the ContentControl to the same bool the developer had. I modified the ControlTemplate of the ContentControl to have a Trigger that would fire when the Boolean value changed.
Here is the code:
<Style x:Key="MyContentControl" TargetType="{x:Type ContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<ContentPresenter/>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Visibility" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ContentControl Style="{DynamicResource MyContentControl}"
IsEnabled="{Binding IsSaveAllowedBool}">
<!-- ALL MY CONTENT -->
</ContentControl>
This solution worked perfectly. Just thought I'd share.

WP7 ListBox Items to fill the width of the ListBox

I am trying to get the Items in a ListBox to span the entire width of the ListBox. I have found several posts dealing with HorizontalContentAlignment="Stretch" but I have not been able to get it to work in my WP7 app. Here is my ListBox:
<ListBox Margin="8" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Collection}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34"
BorderThickness="1" HorizontalAlignment="Stretch" >
<Grid Background="Transparent" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0" HorizontalAlignment="Stretch"
Margin="2"
FontSize="10"
Text="{Binding Property1}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
I am trying to get the orange Border to span the entire width of the listbox so that all the list items are the same size and not just the size of the text in the TextBlock.
Use the following static resource as ItemContainerStyle of Listbox:
ItemContainerStyle="{StaticResource ListboxStretchStyle}"
<Application.Resources>
<Style TargetType="ListBoxItem" x:Key="ListboxStretchStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
This is what I do use for that:
<ListBox Height="430" Margin="50,70,50,110" Name="myListBox" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="{StaticResource PhoneAccentBrush}" >
<TextBlock
Text="{Binding Text}"
FontSize="30"
Foreground="{StaticResource PhoneForegroundBrush}" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
more ore less found here: http://timdams.wordpress.com/2011/11/30/creating-a-wp7-app-listbox-items-of-the-same-width/
I believe this is a bug in the beta release, because HorizontalContentAlignment should be it.
as a workaround you might have to use a fixed width value.
Looks like John Gardner is on point with this being a bit of a defect in the Beta. It works fine in "plain old" Silverlight, but yields oddly-centered areas in the Phone. It is easy enough to work past, however.
Get rid of / comment out the ListBox.ItemContainerStyle entry in your listbox, above.
In Blend, select your ListBox in the Objects and Timeline panel, right click, and select Edit Additional Templates / Edit Generated Item Container (ItemContainerStyle) / Edit a Copy... Choose a name/key and location for the new style resource.
Locate the ContentContainer control, and set its Horizontal Content Alignment to Bind to the Horizontal Content Alignment set in the item consuming this template, (HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ) as follows:
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
Once you've told the ContentControl how it should align its (ahem) content, the results should be what you expected.

Resources