1

Eu uso xamarin.forms(Net Standard) e estou tendo dificuldade em criar um badge e mostrar seu valor. Tenho uma página(Tabbed Page) que tem um Grid com 8 células.

Cada célula possui uma imagem e cada imagem irá receber esse badge com seu respectivo valor.

A página é a abaixo(xaml):

<Grid x:Name="grd" 
      RowSpacing="1" 
      ColumnSpacing="1" 
      Padding="0" 
      Margin="0" >
<Grid.RowDefinitions>
    <RowDefinition Height="1" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    </Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

    <Image x:Name="imgDesvioFat" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" 
           Source="{local:ImageResource Operacional.Images.faturamento caixa-28.png}" 
           Aspect="AspectFill">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnDesvioFaturamentoTapReconizerTapped" 
                                  NumberOfTapsRequired="1">
            </TapGestureRecognizer>
        </Image.GestureRecognizers>
    </Image>  
    <Image x:Name="imgTckCancelados" Grid.Row="1" Grid.Column="1" 
           Source="{local:ImageResource Operacinal.Images.tickets cancelados-05.png}" 
           Aspect="AspectFill">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnTckCanceladosTapGestureReconizerTapped" 
                                  NumberOfTapsRequired="1">
            </TapGestureRecognizer>
        </Image.GestureRecognizers>
    </Image>

    <Image x:Name="imgPrestacaoContas" Grid.Row="2" Grid.Column="0" Source="{local:ImageResource Operacional.Images.prestação de contas-07.png}" Aspect="AspectFill">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnPrestacaoContasTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
        </Image.GestureRecognizers>
    </Image>

    <Image x:Name="imgArrecadacao" Grid.Row="2" Grid.Column="1" Source="{local:ImageResource Operacional.Images.pendencias de arrecadação-10.png}" Aspect="AspectFill">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnPendenciasTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
        </Image.GestureRecognizers>
    </Image>

        <Image x:Name="imgOcupacao1" Grid.Row="3" Grid.Column="0" Source="{local:ImageResource Operacional.Images.ocupação maior 80-15.png}" Aspect="AspectFill" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnOcupacaoTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
            </Image.GestureRecognizers>
        </Image>

    <Image x:Name="imgOcupacao2" Grid.Row="3" Grid.Column="1" Source="{local:ImageResource Operacional.Images.ocupação menor 60-16.png}" Aspect="AspectFill">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnOcupacaoTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
        </Image.GestureRecognizers>
    </Image>

    <Image x:Name="imgCheckList" Grid.Row="4" Grid.Column="0" Source="{local:ImageResource Operacional.Images.checklist-24.png}" Aspect="AspectFill">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnCheckListTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
        </Image.GestureRecognizers>
    </Image>

    <Image x:Name="MyImage" Grid.Row="4" Grid.Column="1" Source="{local:ImageResource Operacional.Images.mensagens-21.png}" Aspect="AspectFill">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnTrocaImageTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
        </Image.GestureRecognizers>
    </Image>

    <AbsoluteLayout>
        <Label x:Name="lblFaturamento" Text="" AbsoluteLayout.LayoutBounds="20,8,40,100" Grid.Row="1" Grid.Column="0" TextColor="White" FontSize="9" FontAttributes="Bold"/>
        <Label x:Name="lblCancelados" Text=""  AbsoluteLayout.LayoutBounds="195,8,40,100" Grid.Row="1" Grid.Column="1" TextColor="White" FontSize="9" FontAttributes="Bold"/>
        <Label x:Name="lblPrestacaoContas" Text="" AbsoluteLayout.LayoutBounds="20,8,40,100" Grid.Row="2" Grid.Column="0" TextColor="White" FontSize="9" FontAttributes="Bold"/>
        <Label x:Name="lblPendencias" Text="" Grid.Row="2" Grid.Column="1" TextColor="White" FontSize="9" FontAttributes="Bold"/>
        <Label x:Name="lblOcupacao1" Text="" AbsoluteLayout.LayoutBounds="20,232,80,100" Grid.Row="3" Grid.Column="0" TextColor="White" FontSize="9" FontAttributes="Bold"/>
        <Label x:Name="lblOcupacao2" Text="" AbsoluteLayout.LayoutBounds="196,234,80,100" Grid.Row="3" Grid.Column="1" TextColor="White" FontSize="9" FontAttributes="Bold"/>
    </AbsoluteLayout>
</Grid>

Esse é o método que uso para trocar a imagem e o valor do label que agora deverá estar no badge

var resultado = CalcularResultado(); // Código irrelevante

label.Text = resultado;

A variável que vai receber o valor a ser impresso no badge é resultado. Esse é o código que peguei na internet para criar o badge (CircleView):

public partial class CircleView : BoxView
{
    public static readonly BindableProperty CornerRadiusProperty = BindableProperty.Create(nameof(CornerRadius), typeof(double), typeof(CircleView), 0.0);

    public double CornerRadius
    {
        get { return (double)GetValue(CornerRadiusProperty); }
        set { SetValue(CornerRadiusProperty, value); }
    }

    public CircleView()
    {
        InitializeComponent();
    }
}

// o renderizador que criei no projeto Droid // Código irrelevante

O xaml do BadgeView:

<Grid xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:local="clr-namespace:your_local_namespace"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"      
      x:Class="your_local_namespace.BadgeView"     
      HeightRequest="16"     
      WidthRequest="16">
    <local:CircleView x:Name="BadgeCircle" 
                      HeightRequest="16" 
                      WidthRequest="16" 
                      CornerRadius="16" 
                      VerticalOptions="Center" 
                      HorizontalOptions="Center" />
    <Label x:Name="BadgeLabel" 
           TextColor="White" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" 
           VerticalTextAlignment="Center" 
           HorizontalTextAlignment="Center" 
           FontSize="10"/>
</Grid>

O codebehind da BadgeView:

public partial class BadgeView : Grid
{
    public static BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(BadgeView), "0", propertyChanged: (bindable, oldVal, newVal) =>
    {
        var view = (BadgeView)bindable;
        view.BadgeLabel.Text = (string)newVal;
    });

    public static BindableProperty BadgeColorProperty = BindableProperty.Create("BadgeColor", typeof(Color), typeof(BadgeView), Color.Blue, propertyChanged: (bindable, oldVal, newVal) =>
    {
        var view = (BadgeView)bindable;
        view.BadgeCircle.BackgroundColor = (Color)newVal;
    });

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }
    public Color BadgeColor
    { 
        get { return (Color)GetValue(BadgeColorProperty); }
        set { SetValue(BadgeColorProperty, value); }
    }

    public BadgeView()
    {
        InitializeComponent();
        BadgeLabel.Text = Text;
        BadgeCircle.BackgroundColor = BadgeColor;
    }
}

Aqui parece ser a chamada do badge o qual deveria ser de dentro da classe que tem o método para preencher os valores.

<Grid>
    <Label HorizontalTextAlignment="Center" 
           Text="Look at me!"/>
    <views:BadgeView Text="3" 
                     BadgeColor="Green" 
                     VerticalOptions="Start" 
                     HorizontalOptions="End"/>
</Grid>
2
  • Sua pergunta necessita de edição: Eu acredito que o tempo exigido para qualquer um fora do contexto para interpretar um monte de código copiado e colado de qualquer jeito é desencorajador, para dizer o mínimo. Além de não estar claro em que ponto você chegou ou qual a dúvida específica... 23/02/2018 às 15:10
  • 1
    @DiegoRafaelSouza, pô primeiro valeu pela dica. Gosto disso, sinceridade e na resposta também. Muito obrigado.
    – pnet
    23/02/2018 às 16:20

1 Resposta 1

2

Na verdade estão sendo criados dois componentes.

O primeiro deles é o CircleView para o qual você precisa de um renderizador na plataforma. O segundo, é a BadgeView que - mais uma vez - não é uma página é apenas um componente, uma View (Grid) com a outra view que você criou CircleView e um label sobre ela.

O último código da sua pergunta mostra como você irá usá-la no XAML, atribuindo uma cor (Verde) um eum valor (3) para a badge.

No seu caso, para usá-la sobre as imagens da sua página, basta segir o exemplo abaixo. Após a declaração da Image, declara uma badge na mesma coluna e linha da grid:

<Image x:Name="imgDesvioFat" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" 
       Source="{local:ImageResource Operacional.Images.faturamento caixa-28.png}" 
       Aspect="AspectFill">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnDesvioFaturamentoTapReconizerTapped" 
                              NumberOfTapsRequired="1">
        </TapGestureRecognizer>
    </Image.GestureRecognizers>
</Image>

<BadgeView Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"
           x:Name="bdgDesvioFat"
           BadgeColor="Red"/>

E lá onde você atribui o valor do label (label.Text = resultado) você passaria a atribuir o texto para a badge correspondente: bdgDesvioFat.Text = resultado;.

Sugestão:

Se você estivesse usando bindings você teria uma redução de no mínimo 40% desse código todo que está sendo escrito. Além de ficar mais claro, diminui os pontos passíveis de erro e facilita a aplicação de testes automatizados. É uma boa pesquisa

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .