locked
Shape not having the same Width as Label? RRS feed

  • Question

  • User368387 posted

    I have the following code inside my CollectionView:

    <CollectionView.ItemTemplate> <DataTemplate x:DataType="models:TagDetailedObject"> <ContentView> <StackLayout Margin="10" BackgroundColor="Purple" HorizontalOptions="FillAndExpand" Orientation="Vertical"> <Rectangle Fill="DarkBlue" HeightRequest="50" HorizontalOptions="Center" RadiusX="50" RadiusY="50" Stroke="Red" StrokeLineJoin="Round" StrokeThickness="5" WidthRequest="{Binding Source={x:Reference labelTagTitle}, Path=Width}" /> <Label x:Name="labelTagTitle" BackgroundColor="Gray" FontSize="Large" HorizontalOptions="Center" SizeChanged="labelTagTitle_SizeChanged" Text="{Binding TitleResource}" TextColor="AntiqueWhite" /> <StackLayout BindableLayout.ItemsSource="{Binding TechsInTag}" HorizontalOptions="Center" Orientation="Horizontal"> <BindableLayout.ItemTemplate> <DataTemplate> <BoxView BackgroundColor="Green" HeightRequest="50" WidthRequest="50" /> </DataTemplate> </BindableLayout.ItemTemplate> </StackLayout> </StackLayout> </ContentView> </DataTemplate> </CollectionView.ItemTemplate>

    I want the Rectangle to have the same Width value as the Label and I tried to accomplish it with this line:

    WidthRequest="{Binding Source={x:Reference labelTagTitle}, Path=Width}" However I am not getting the result I expected, how should I do this inside the XAML? Expected Result:

    Current Result:

    Thursday, October 8, 2020 9:35 PM

Answers

  • User371688 posted

    For this question , I have posted a new issue about this ,you can follow it up here: https://github.com/xamarin/Xamarin.Forms/issues/12454

    Thanks for you feedback. Have a nice day. :)

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, October 12, 2020 3:01 AM

All replies

  • User371688 posted

    If you set the WidthRequest for your label,you can just replace the following code:

     WidthRequest="{Binding Source={x:Reference labelTagTitle}, Path=Width}
    

    with

     WidthRequest="{Binding Source={x:Reference labelTagTitle}, Path=WidthRequest}"
    

    Usage sample:

                        <Rectangle
                                Fill="DarkBlue"
                                HorizontalOptions="Center"
                                HeightRequest="50"
                                RadiusX="50"
                                RadiusY="50"
                                Stroke="Red"
                                StrokeLineJoin="Round"
                                StrokeThickness="5"
                               WidthRequest="{Binding Source={x:Reference labelTagTitle}, Path=WidthRequest}"
                                />
                            <Label
                                WidthRequest="100"
                                x:Name="labelTagTitle"
                                BackgroundColor="Gray"
                                FontSize="Large"
                                HorizontalOptions="Center"
                                Text="{Binding Name}"
                                TextColor="AntiqueWhite" />
    
    Friday, October 9, 2020 2:20 AM
  • User368387 posted

    @jezh Thank you for your response. While this kinda works, this limits the width of the label, which is something I don't want to do. My idea is that the label is free and the rectangle matches him, is it not possible to use Width for this?

    Friday, October 9, 2020 5:58 AM
  • User371688 posted

    For this question , I have posted a new issue about this ,you can follow it up here: https://github.com/xamarin/Xamarin.Forms/issues/12454

    Thanks for you feedback. Have a nice day. :)

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, October 12, 2020 3:01 AM
  • User368387 posted

    @jezh Thank you so much! I'll subscribe to the thread.

    Monday, October 12, 2020 4:20 AM
  • User371688 posted

    If my reply is useful for you, could you please mark my reply as answered? Thanks in advance. :)

    Monday, October 12, 2020 5:30 AM