Question

我从这里抓住了示例项目：https://developer.xamarin.com/samples/xamarin-forms/BoxView/ListViewColors/

我试图进行视觉上的改变，特别是我试图让颜色方块成圆角。原始颜色方块为BoxView s，它们使用WidthRequest和HeighRequest，均设置为50。这成功地使它们成为正方形。但是：

BoxView没有CornerRadius属性，所以我已经改为Frame了。
我不想使用积分，我想使用RelativeLayout值，因此我尝试使用Factor=0.1 ItemTemplate设置宽度和高度{＆＃39; s Frame。
它不起作用！无论我做什么，彩色框架只是一个奇怪的长方形 - 它们甚至不再是正方形。

我做错了什么？

    <ListView SeparatorVisibility="None"
              BackgroundColor="Transparent"
              ItemsSource="{x:Static local:NamedColor.All}"
                  RelativeLayout.WidthConstraint="{ConstraintExpression 
                Type=RelativeToParent,
                Property=Width,
                Factor=1}">
        <ListView.RowHeight>
            <OnPlatform x:TypeArguments="x:Int32">
                <On Platform="iOS, Android" Value="80" />
                <On Platform="UWP" Value="90" />
            </OnPlatform>
        </ListView.RowHeight>

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ContentView Padding="5">
                        <Frame x:Name="itemFrame"
                               BackgroundColor="#bbffffff"
                               Padding="8"
                               CornerRadius="10"
                               HasShadow="false">
                            <StackLayout Orientation="Horizontal">
                                <Frame x:Name="colorFrame"
                                    CornerRadius="20"
                                    OutlineColor="Transparent"
                                    BackgroundColor="{Binding Color}"
                                    HasShadow="false"
                                RelativeLayout.WidthConstraint="{ConstraintExpression
                                    Type=RelativeToView,
                                    ElementName=itemFrame,
                                    Property=Width,
                                    Factor=0.1}"
                                RelativeLayout.HeightConstraint="{ConstraintExpression 
                                    Type=RelativeToView,
                                    ElementName=itemFrame,
                                    Property=Width,
                                    Factor=0.1}"/>
                                <StackLayout>
                                    <Label Text="{Binding FriendlyName}"
                                           FontSize="22"
                                           VerticalOptions="StartAndExpand" />
                                    <Label Text="{Binding RgbDisplay, StringFormat='RGB = {0}'}"
                                           FontSize="16"
                                           VerticalOptions="CenterAndExpand" />
                                </StackLayout>
                            </StackLayout>
                        </Frame>
                    </ContentView>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
        </RelativeLayout>
</ContentPage>

Answer 1

外框中的填充似乎干扰了圆圈的形状，使其呈现为椭圆形。删除填充有效，您可以从框架中获得圆形。

对于UWP应用程序，帧的角半径属性通常不会呈现。因此，您需要为您的框架制作自定义渲染器以获取圆圈。至于您的列表视图，您可以使用以下代码：

<ListView.ItemTemplate>
    <DataTemplate>
         <ViewCell>
            <ContentView Padding="5">
                <RelativeLayout VerticalOptions="FillAndExpand">
                     <Frame OutlineColor="Accent" CornerRadius="6" HorizontalOptions="FillAndExpand" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=1,Constant=0}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=1,Constant=0}" >
                         <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=1,Constant=0}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=1,Constant=0}" >
                              <Frame BackgroundColor="{Binding Color}" CornerRadius="60" RelativeLayout.HeightConstraint ="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6, Constant=0}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.6,Constant=0}"/>
                              <StackLayout HorizontalOptions="FillAndExpand">
                                   <Label Text="{Binding FriendlyName}" FontSize="22" VerticalOptions="StartAndExpand" />
                                   <Label Text="{Binding RgbDisplay, StringFormat='RGB = {0}'}" FontSize="16" VerticalOptions = "CenterAndExpand" />
                              </StackLayout>
                         </StackLayout>
                     </Frame>
                </RelativeLayout>
            </ContentView>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

对于UWP的框架，自定义渲染器：

public class CustomFrame:FrameRenderer
{
     protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
     {
            base.OnElementChanged(e);

            if (Control != null)
            {
                var frame = e.NewElement;
                Windows.UI.Color frameBG = Windows.UI.Color.FromArgb(
                    (byte)(frame.BackgroundColor.A * 255),
                    (byte)(frame.BackgroundColor.R * 255),
                    (byte)(frame.BackgroundColor.G * 255),
                    (byte)(frame.BackgroundColor.B * 255));

                Control.CornerRadius = new Windows.UI.Xaml.CornerRadius(frame.CornerRadius);
                Control.Background = new SolidColorBrush(frameBG);
                frame.BackgroundColor = Xamarin.Forms.Color.Transparent;
            }
     }
}

Xamarin中的RelativeLayout：不能制作正方形

1 个答案: