Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Shape not having the same Width as Label?

albertoha94albertoha94 Member ✭✭✭

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:

Best Answer

Answers

  • jezhjezh Member, Xamarin Team Xamurai
    edited October 9

    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" />
    
  • albertoha94albertoha94 Member ✭✭✭

    @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?

  • albertoha94albertoha94 Member ✭✭✭

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

  • jezhjezh Member, Xamarin Team Xamurai

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

Sign In or Register to comment.