定位标签和图像组件Xamarin形式

Question

我需要这样的东西： “在此处输入图像描述”

我现在有这个： “在此处输入图像描述”

XAML：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="PetCare.Client.View.Forgot.ForgotPasswordView">
    <ContentPage.Content>
        <Grid RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*" ></ColumnDefinition>
                <ColumnDefinition Width="auto" ></ColumnDefinition>
                <ColumnDefinition Width="2*" ></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <StackLayout Grid.Row="0"
                         Grid.Column="0" 
                         Grid.ColumnSpan="3" 
                         x:Name="BackgroundTop">
            </StackLayout>

            <Image Grid.Row="0"
                   Grid.Column="1" 
                   Grid.RowSpan="2"
                   x:Name="Icon"/>
            <StackLayout  Grid.Row="2" 
                          Grid.Column="0"
                          Grid.ColumnSpan="3" 
                          Grid.RowSpan="4"
                          x:Name="BackgroundBot"
                          Spacing="0">
                <Label Grid.Row="2" 
                       Grid.Column="1"
                       x:Name="TextTitleLable"
                   />
                <StackLayout Grid.Row="3"
                             Grid.Column="1"
                             BackgroundColor="Red"
                             x:Name="BackgroundImage"
                             Spacing="0">
                    <Image x:Name="Phone"/>
                </StackLayout>
                <StackLayout Grid.Row="3"
                             Grid.Column="1"
                             BackgroundColor="Blue"
                             x:Name="BackgroundTextDescription"
                             Spacing="0">
                    <Label x:Name="TextDescription"></Label>
                </StackLayout>
                <StackLayout Grid.Row="4"
                             Grid.RowSpan="2"
                             x:Name="BackgroundInputNavigation">
                    <Entry x:Name="InputUser" />
                    <Label x:Name="ErrorMessage"/>
                    <Label x:Name="OtherOption"/>
                </StackLayout>
            </StackLayout>
            <Button  Grid.Row="8" 
                     Grid.Column="1"
                     x:Name="BtnContinue"
                     Clicked="ClickedBtnContinue"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

C＃：

 //BackgrouTextndInputNavigation.
        public ForgotPasswordView()
        {
            InitializeComponent();
            NavigationPage.SetHasNavigationBar(this, false);
            SetColorsApp();
            SetBtnContinueProperties();
            SetTextTitleLableProperties();
            SetIconProperties();
            SetBackgroundTopProperties();
            SetBackgroundBotProperties();
            SetInputUserProperties();
            SetOtherOptionProperties();
            SetErrorMessageProperties();
            SetPhoneProperties();
            SetTextDescriptionProperties();
            SetBackgroundImageProperties();
            SetBackgroundTextDescriptionProperties();

            

        }
        private void SetBackgroundTextDescriptionProperties()
        {
            BackgroundTextDescription.Orientation = StackOrientation.Horizontal;
            BackgroundTextDescription.HorizontalOptions = LayoutOptions.End;
            BackgroundTextDescription.VerticalOptions = LayoutOptions.Center;
        }
        private void SetBackgroundImageProperties()
        {
            BackgroundImage.Orientation = StackOrientation.Horizontal;
            BackgroundImage.HorizontalOptions = LayoutOptions.Start;
            BackgroundImage.VerticalOptions = LayoutOptions.Center;


        }
        private void SetTextDescriptionProperties()
        {
            Label textPhoneNumber = new Label();

            textPhoneNumber.Text = "XXXXX-XX89";
            textPhoneNumber.TextColor = Color.FromHex(ColorsApp.ColorAppWarning);
            textPhoneNumber.FontSize = 18;


            string Text = "Foi enviada uma mensagem\ncom Código de Verificação\npara o Telefone "+ textPhoneNumber.Text+ "\ncadastrado em sua conta.\nInforme este Código para\nprosseguir.".Replace("\n", System.Environment.NewLine);
            TextDescription.Text = Text;
            TextDescription.FontSize = 18;
            TextDescription.HorizontalTextAlignment = TextAlignment.End;
            TextDescription.VerticalOptions = LayoutOptions.Center;
        }
        private void SetPhoneProperties()
        {
            Phone.Source = ImageSource.FromFile("phone.png");
            Phone.HorizontalOptions = LayoutOptions.Start;
            Phone.VerticalOptions = LayoutOptions.Center;
            Phone.HeightRequest = 110;

        }
        private void SetErrorMessageProperties()
        {
            ErrorMessage.FontAttributes = FontAttributes.Bold;
            ErrorMessage.Margin = new Thickness(0, 0, 0, 30);
        }

        private void SetOtherOptionProperties()
        {
            var tap = new TapGestureRecognizer();

            tap.Tapped += async (s, e) => await Navigation.PushAsync(new OtherOptionResetPasswordView());

            OtherOption.Text = "Usar outra opção de verificação";
            OtherOption.FontSize = 18;
            OtherOption.GestureRecognizers.Add(tap);
            OtherOption.TextColor = Color.FromHex(ColorsApp.ColorAppPrimary);

            tap = null;
        }
        private void SetInputUserProperties()
        {
            InputUser.Placeholder = "Inserir o Código";
            InputUser.Margin = new Thickness(0, 20, 0, 0);
        }
        private void SetBackgroundBotProperties()
        {
            BackgroundBot.Padding = 30;
            BackgroundBot.HeightRequest = 300;
            BackgroundBot.HorizontalOptions = LayoutOptions.FillAndExpand;
            BackgroundBot.VerticalOptions = LayoutOptions.FillAndExpand;
        }
        private void SetBackgroundTopProperties()
        {
            BackgroundTop.BackgroundColor = Color.FromHex(ColorsApp.ColorAppThemePrimary);
            BackgroundTop.HorizontalOptions = LayoutOptions.FillAndExpand;
            BackgroundTop.VerticalOptions = LayoutOptions.FillAndExpand;
            BackgroundTop.Padding = 10;
        }
        private void SetIconProperties()
        {
            Icon.Source = ImageSource.FromFile("smartphone.png");
            Icon.HorizontalOptions = LayoutOptions.Center;
            Icon.VerticalOptions = LayoutOptions.Center;
        }
        private void SetTextTitleLableProperties()
        {
            TextTitleLable.HorizontalTextAlignment = TextAlignment.Start;
            TextTitleLable.VerticalTextAlignment = TextAlignment.Start;
            TextTitleLable.Text = "Verificar Identidade";
            TextTitleLable.FontSize = 28;
            TextTitleLable.TextColor = Color.FromHex(ColorsApp.ColorAppDark);
        }
        private void SetBtnContinueProperties()
        {
            BtnContinue.BackgroundColor = Color.FromHex(ColorsApp.ColorAppThemePrimary);
            BtnContinue.VerticalOptions = LayoutOptions.End;
            BtnContinue.HorizontalOptions = LayoutOptions.End;
            BtnContinue.TextColor = Color.White;
            BtnContinue.Padding = new Thickness(3);
            BtnContinue.Margin = new Thickness(0, 0, 30, 30);
            BtnContinue.Text = "Continuar";
            BtnContinue.FontSize = 22;
            BtnContinue.WidthRequest = 140;
        }
        private void SetColorsApp()
        {
            BackgroundBot.BackgroundColor = Color.FromHex(ColorsApp.ColorAppThemeDefault);
        }
        private async void ClickedBtnContinue(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new ResetPasswordView());
        }

我需要两件事：将电话号码换成另一种颜色；并将图像放置在标签旁边。

我是个初学者，所以我要求提供一些代码以及说明。请

[看起来，即使这些组件水平放置，它们不能并排站立。我试图将两者放在同一个堆栈中布局，但堆栈布局高度基于图像，剩下一个或隐藏两行文字

Answer 1

老实说，您的Grid是一团糟的XD

首先，您应该意识到，通过使用Grid，您应该能够摆脱大部分Stacklayout。请查看精彩的docu that Xamarin has on Grid和许多其他主题：D

接下来，我与您分享我制定出的Grid以显示您想要的内容（请注意缺少Grid！]]]

Stacklayout

在我这边看起来像：

还请注意@Jason在评论中所说的内容：“ 您在C＃中所做的一切都可以包含在您的XAML中

”（这意味着所有属性设置）。

我希望你能走！

编辑1

我能够通过使用Xamarin.Forms中的快速获得上图中的结果：玩吧！

定位标签和图像组件Xamarin形式

问题描述投票：0回答：1

1个回答

编辑1

最新问题

定位标签和图像组件Xamarin形式

问题描述 投票：0回答：1

1个回答

编辑1

最新问题

问题描述投票：0回答：1