Pluguins.Forms.Button.Circle单击问题

时间:2019-01-22 11:43:28

标签: button plugins xamarin.forms geometry

我正在使用网格中的Plugins.Forms.ButtonCircle,正在代码中添加按钮:

for(int index = 0; index < _viewModel.NumButtons; index++)
            {
                ButtonCircle.FormsPlugin.Abstractions.CircleButton b;
                if (_viewModel.SelectedIndex == index)
                {
                    b = new ButtonCircle.FormsPlugin.Abstractions.CircleButton()
                    {
                        ClassId = index.ToString(),
                        BorderColor = Color.Black,
                        BackgroundColor = Color.FromHex(_viewModel.AvailableColors[index]),
                        HeightRequest = 20,
                        WidthRequest = 20,

                    };
                }
                else
                {
                    b = new ButtonCircle.FormsPlugin.Abstractions.CircleButton()
                    {
                        ClassId = index.ToString(),
                        BorderColor = Color.Black,
                        Margin = 0,
                        BorderThickness = 0,
                        Image = "rsz_not_visible.png",
                        BackgroundColor = Color.FromHex(_viewModel.AvailableColors[index]),
                        HeightRequest = 20,
                        WidthRequest = 20,

                    };
                }

                b.Clicked += OnButtonClicked;

                Grid.SetRow(b, 1);
                Grid.SetColumn(b, index);
                Grid.SetRowSpan(b, 1);
                Grid.SetColumnSpan(b, 1);
                ContentGrid.Children.Add(b);
            }

xaml网格是这样的:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
         xmlns:circbut="clr-namespace:ButtonCircle.FormsPlugin.Abstractions;assembly=ButtonCircle.FormsPlugin.Abstractions"
         x:Class="Llotja.Views.Bar"
         x:Name="BarPage">
<ContentPage.Content>


    <Grid Padding="5,5,0,0"
          x:Name="ContentGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Label
            Grid.Row="0"
            Grid.Column="0"
            Grid.RowSpan="1"
            Grid.ColumnSpan="1"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Text="Setmana:"
            Font="Bold"
            TextColor="#000000"/>

        <Button 
                Grid.Row="0"
                Grid.Column="1"
                Grid.RowSpan="1"
                Grid.ColumnSpan="1"
                x:Name="Left"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Image="left_arrow.png"
                BackgroundColor="#D60000"
                HeightRequest="25"
                WidthRequest="15"/>
        <Entry
            Grid.Row="0"
            Grid.Column="2"
            Grid.RowSpan="1"
            Grid.ColumnSpan="1"
            x:Name="Entry"
            Text="1"
            Keyboard="Numeric"/>

        <Button 
                Grid.Row="0"
                Grid.Column="3"
                Grid.RowSpan="1"
                Grid.ColumnSpan="1"
                x:Name="Right"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Image="right_arrow.png"
                BackgroundColor="#D60000"
                HeightRequest="25"
                WidthRequest="15"/>


        <oxy:PlotView 
            Grid.Row="2"
            Grid.RowSpan="2"
            Grid.ColumnSpan="5"

            x:Name="Plot" />
    </Grid>

</ContentPage.Content>

然后,当单击按钮时,我将像这样删除背景图片:

        if (!aux.Model.Series[Int32.Parse(b.ClassId)].IsVisible)
        {
            b.Image = "rsz_not_visible.png";
        }
        else
        {
            b.Image = null;
        }

如您所见,声明创建按钮的效果很好,但是当我点击按钮时,该函数可以添加图像或删除图像,但是在背景中显示一个矩形,我应该更改哪个属性?问题是按钮还是Grid声明?

Before Tap

After Tap

Without Background color

1 个答案:

答案 0 :(得分:0)

根据我的原因很简单,您正在为“圆形”按钮提供黑色边框颜色,按照我的看法,这一定是导致此问题的原因,您可以尝试删除它或使其透明吗?

   new ButtonCircle.FormsPlugin.Abstractions.CircleButton()
                {
                    ClassId = index.ToString(),
                    BorderColor = Color.Black, //// The code is here
                    Margin = 0,
                    BorderThickness = 0,
                    Image = "rsz_not_visible.png",
                    BackgroundColor = Color.FromHex(_viewModel.AvailableColors[index]),
                    HeightRequest = 20,
                    WidthRequest = 20,

                };