RelativeLayout.Children.Add in ColumnDefinitions is not working??

Hi Xamarin forms developers
I create a Gird using columnDefinitions (4 column) , and Add four Imagebutton, the problem is I try to plus Badage on Imagebuttons using relativelayout, it not working. Attach is effect I want. thanks reading.
ps: Badge is come from https://alexdunn.org/2017/03/15/xamarin-controls-badgeview/

public class GridBottomPanel : Grid
    {
        private PageTypeEnum _PageType { get; set; }
        public bool IsRoot { get; set; }
        private ImageButton btnWork = new ImageButton { Source = "messageBottomIcon_01_Work", Style=(Style)Application.Current.Resources["bottomImageButtonStyle"] };
        private ImageButton btnSchedule = new ImageButton { Source = "messageBottomIcon_02_Schedule", Style = (Style)Application.Current.Resources["bottomImageButtonStyle"] };
        private ImageButton btnTrack = new ImageButton { Source = "messageBottomIcon_03_Track", Style = (Style)Application.Current.Resources["bottomImageButtonStyle"] };
        private ImageButton btnNotifi = new ImageButton { Source = "messageBottomIcon_04_Notifi", Style = (Style)Application.Current.Resources["bottomImageButtonStyle"] };
        private BadgeView WorkBadge = new BadgeView { Text = "1", BadgeColor = Color.Red , IsVisible =true};
        private BadgeView ScheduleBadge = new BadgeView { Text = "2", BadgeColor = Color.Red, IsVisible = true };
        private BadgeView TrackBadge = new BadgeView { Text = "3", BadgeColor = Color.Red, IsVisible = true };
        private BadgeView NotifiBadge = new BadgeView { Text = "4", BadgeColor = Color.Red, IsVisible = true };      

        public GridBottomPanel()
        {
            RelativeLayout relativeLayout = new RelativeLayout();
            IsRoot = false;
            ColumnDefinitions = new ColumnDefinitionCollection
                {
                    new ColumnDefinition(),
                    new ColumnDefinition(),
                    new ColumnDefinition(),
                    new ColumnDefinition()
                };
            HorizontalOptions = LayoutOptions.Fill;
            VerticalOptions = LayoutOptions.Fill;
#region this is show imagebutton correctly
            Children.Add(btnWork, 0, 0);
            Children.Add(btnSchedule, 1, 0);
            Children.Add(btnTrack, 2, 0);
            Children.Add(btnNotifi, 3, 0);
#endregion
#region this is I try to put badge on imagebutton
            relativeLayout.Children.Add(WorkBadge,
            Constraint.RelativeToView(btnWork, (Parent, view) => {
                 return view.X + 20;
            }),
            Constraint.RelativeToView(btnWork, (parent, view) => {
                return view.Y + 10;
            }),
            Constraint.Constant(125),
            Constraint.Constant(80));
#endregion
            btnWork.Clicked += BtnWork_Clicked;
            btnSchedule.Clicked += BtnSchedule_Clicked;
            btnTrack.Clicked += BtnTrack_Clicked;
            btnNotifi.Clicked += BtnNotifi_Clicked;
        }
}

Answers

  • YangShengJiaYangShengJia Member ✭✭

    I will try to make this code separate xaml & xaml.cs

    xaml

    <Grid xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local ="clr-namespace:App1.Pages.BaseView"
                 x:Class="App1.Pages.BaseView.BaseGridXaml">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="12"/>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <BoxView BackgroundColor="{StaticResource BottomBarBackgroundColor}" Grid.Column="0"/>
        <RelativeLayout BackgroundColor="{StaticResource BottomBarBackgroundColor}" Grid.Column="1">
            <ImageButton x:Name="btnWork" Source="messageBottomIcon_01_Work" Style="{StaticResource bottomImageButtonStyle}" Clicked="BtnWork_Clicked"/>
            <local:BadgeView Text="2" BadgeColor="Red" IsVisible="True"
                             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=btnWork,Property=Y,Factor=1,Constant=0}"
                             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=btnWork,Property=X,Factor=1,Constant=30}"/>
        </RelativeLayout>
        <RelativeLayout BackgroundColor="{StaticResource BottomBarBackgroundColor}" Grid.Column="2">
            <ImageButton x:Name="btnSchedule" Source="messageBottomIcon_02_Schedule" Style="{StaticResource bottomImageButtonStyle}" Clicked="BtnSchedule_Clicked"/>
            <local:BadgeView Text="2" BadgeColor="Red" IsVisible="True"
                             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=btnSchedule,Property=Y,Factor=1,Constant=0}"
                             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=btnSchedule,Property=X,Factor=1,Constant=30}"/>
        </RelativeLayout>
        <RelativeLayout BackgroundColor="{StaticResource BottomBarBackgroundColor}" Grid.Column="3">
            <ImageButton x:Name="btnTrack" Source="messageBottomIcon_03_Track" Style="{StaticResource bottomImageButtonStyle}" Clicked="BtnTrack_Clicked"/>
            <local:BadgeView Text="2" BadgeColor="Red" IsVisible="True"
                             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=btnTrack,Property=Y,Factor=1,Constant=0}"
                             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=btnTrack,Property=X,Factor=1,Constant=30}"/>
        </RelativeLayout>
        <RelativeLayout BackgroundColor="{StaticResource BottomBarBackgroundColor}" Grid.Column="4">
            <ImageButton x:Name="btnNotifi" Source="messageBottomIcon_04_Notifi" Style="{StaticResource bottomImageButtonStyle}" Clicked="BtnNotifi_Clicked"/>
            <local:BadgeView Text="2" BadgeColor="Red" IsVisible="True"
                             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=btnNotifi,Property=Y,Factor=1,Constant=0}"
                             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=btnNotifi,Property=X,Factor=1,Constant=30}"/>
        </RelativeLayout>
    </Grid> 
    

    in this code insert RelativeLayout, but I still want to know how to write in .cs

Sign In or Register to comment.