如何在Xamarin Forms中的按钮上创建网格

时间:2018-09-09 21:53:26

标签: c# xamarin xamarin.forms

因此,我需要创建一个自定义按钮,在我必须创建的网格上,并且在此网格上,我需要创建带有特定信息的多个标签。 这是我将孩子添加到按钮上的代码

    private void HighlightTodayDay()
    {
        Label label1 = new Label()
        {
            BackgroundColor = Color.DarkRed,
            Text = "lbl1"
        };

        Label label2 = new Label()
        {
            BackgroundColor = Color.Gold,
            Text = "lbl2"
        };

        if ((DateTime.Today.Year == actualVisibleMonth.Year) && (DateTime.Today.Month == actualVisibleMonth.Month))
        {
            foreach (var child in Children.Reverse())
            {
                if (child.ClassId.ToString() == ("actualDayButtonID" + DateTime.Today.Day.ToString()) && child.IsEnabled == true)
                {
                    DayButton todayDayButton = dayButtonsList[DateTime.Today.Day + shiftOfFirstDay];
                    todayDayButton.TextColor = Color.FromHex("#0f0");
                    //upto this line everything is working as it should
                    todayDayButton.insideGrid.Children.Add(label1, 0, 0);  //do nothing
                    todayDayButton.insideGrid.Children.Add(label2, 0, 1); //do nothing
                    return;
                }
            }
        }
    }

这是“自定义”按钮中的代码

    class DayButton : Button
{
    public string EventDate;
    public string EventStartTime;
    public string EventEndTime;
    public string EventShift;
    public string EventName;
    public string EventDescription;
    public Grid insideGrid;

    public DayButton()
    {
        insideGrid = new Grid();
        insideGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
        insideGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(3, GridUnitType.Star) });
        insideGrid.Parent = this;
    }
}

它应该像这样click to see image

2 个答案:

答案 0 :(得分:0)

您可以将GestureRecognizer添加到Grid,然后绑定tap事件。

按钮代码(例如现在的ContentView)的示例:

            class DayButton : ContentView
        {
            public string EventDate;
            public string EventStartTime;
            public string EventEndTime;
            public string EventShift;
            public string EventName;
            public string EventDescription;
            public Grid insideGrid;

            public event EventHandler Clicked;

            private TapGestureRecognizer _buttonTap;
            private Lable _ButtonText;

            public DayButton()
            {
                _ButtonText = new Lable 
                { 
                      Text = EventName
                }

                insideGrid = new Grid
            {
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                RowSpacing = 0,

                RowDefinitions =
                {
                    new RowDefinition {Height = GridLength.Auto} //0
                },
                ColumnDefinitions =
                {
                    new ColumnDefinition {Width = GridLength.Star} //0
                }
            };

               //Add your elements to the grid
               insideGrid.Children.Add(_ButtonText, 0, 1, 0, 1)

               //Set the grid as the content of this view
               Content = insideGrid;



                _buttonTap = new TapGestureRecognizer();
                this.GestureRecognizers.Add(_buttonTap);
                _buttonTap.Tapped += ButtonClicked;
            }
        }

            private async void ButtonClicked(object sender, EventArgs e)
            {
                if (this.IsEnabled)
                {
                    Clicked?.Invoke(this, e);
                }

            }

然后,您可以在实现按钮的位置绑定“ Clicked”事件。

private DayButton _btn1 = new DayButton(){ EventName = "FooBaar"};

protected override void OnAppearing()
{
   _btn1.Clicked += OnDayBtnClicked;
   base.OnAppearing();
}

protected override void OnDisappearing()
{
   _btn1.Clicked -= OnDayBtnClicked;
   base.OnDisappearing();
}

private void OnDayBtnClicked(object sender, EventArgs e)
{
     //What to do when a button is clicked
}

答案 1 :(得分:0)

我决定关闭按钮并将其更改为堆栈布局(请病态!),并为此堆栈布局添加新的带有事件的标签! soo代码如下所示:

public partial class Calendar : Grid
{...

    public delegate void OnDayClickedDelegate(DateTime dateOfClickedDay);
    public event OnDayClickedDelegate OnDayClicked;
...
        private void DayClick(DateTime clickedDate)
    {
        OnDayClicked(clickedDate);
    }
...
private void SomeVoid()
{...
 DayLayout eventInDay = dayLayoutList[dayID];
                var eventLabel = new Label
                {
                    BackgroundColor = color,
                    Text = name.ToUpper(),
                    FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
                    FontAttributes = FontAttributes.Bold
                };
                eventInDay.Children.Add(eventLabel);
...}

}

和日视图

        private class DayLayout : StackLayout
    {
        public delegate void OnClickedDelegate(DateTime dateOfClickedDay);
        public event OnClickedDelegate OnClicked;

        public Label DayNumber;

        public DayLayout(DateTime day)
        {
            GestureRecognizers.Add
            (
                new TapGestureRecognizer
                {
                    Command = new Command(() => OnClicked(day))
                }
            );

            var dayNumber = new Label
            {
                HorizontalTextAlignment = TextAlignment.End,
                VerticalTextAlignment = TextAlignment.Start,
                Text = day.ToString("dd"),
                FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)),
                FontAttributes = FontAttributes.Bold
            };

            DayNumber = dayNumber;
            this.Children.Add(DayNumber);
        }
    }