Is it possible to bind a specific index of an array type?

영훈 정 281 Reputation points
2022-11-03T04:27:19.777+00:00
 <CarouselView  
                        x:Name="xCarouselView"  
                        IndicatorView="{x:Reference Indicator}"  
                        ItemsSource="{Binding BindMainContents}">  
  
                        <CarouselView.ItemTemplate>  
                            <DataTemplate>  
  
                                <Grid>  
                                    <Grid.RowDefinitions>  
                                        <RowDefinition Height="*" />  
                                        <RowDefinition Height="*" />  
                                    </Grid.RowDefinitions>  
  
                                    <Grid.ColumnDefinitions>  
                                        <ColumnDefinition Width="*" />  
                                        <ColumnDefinition Width="*" />  
                                        <ColumnDefinition Width="*" />  
                                        <ColumnDefinition Width="*" />  
                                    </Grid.ColumnDefinitions>  
  
  
                                    <!--#region 첫번째줄-->  
                                    <Ctrl:CtrlImageTextButton  
                                        Grid.Row="0"  
                                        Grid.Column="0"  
                                        Margin="45,0,0,0"  
                                        ClassId="{Binding ClassID1}"  
                                        EnableSource="{Binding ImageSrc1}"  
                                        HeightRequest="270"  
                                        HorizontalOptions="StartAndExpand"  
                                        ImageText="{Binding BtnName1}"  
                                        IsVisible="{Binding IsVisible1}"  
                                        OnClicked="BtnMainContentClick"  
                                        PressedSource="{Binding PressedImageSrc1}"  
                                        VerticalOptions="Center"  
                                        WidthRequest="270" />  
  
                                    <Ctrl:CtrlImageTextButton          
                                        Grid.Row="0"  
                                        Grid.Column="1"  
                                        Margin="45,0,0,0"  
                                        ClassId="{Binding ClassID2}"  
                                        EnableSource="{Binding ImageSrc2}"  
                                        HeightRequest="270"  
                                        HorizontalOptions="StartAndExpand"  
                                        ImageText="{Binding BtnName2}"  
                                        IsVisible="{Binding IsVisible2}"  
                                        OnClicked="BtnMainContentClick"  
                                        PressedSource="{Binding PressedImageSrc2}"  
                                        VerticalOptions="Center"  
                                        WidthRequest="270" />  
  
                                    <Ctrl:CtrlImageTextButton  
                                        Grid.Row="0"  
                                        Grid.Column="2"  
                                        Margin="45,0,45,0"  
                                        ClassId="{Binding ClassID3}"  
                                        EnableSource="{Binding ImageSrc3}"  
                                        HeightRequest="270"  
                                        HorizontalOptions="StartAndExpand"  
                                        ImageText="{Binding BtnName3}"  
                                        IsVisible="{Binding IsVisible3}"  
                                        OnClicked="BtnMainContentClick"  
                                        PressedSource="{Binding PressedImageSrc3}"  
                                        VerticalOptions="Center"  
                                        WidthRequest="270" />  
  
                                    <Ctrl:CtrlImageTextButton  
                                        Grid.Row="0"  
                                        Grid.Column="3"  
                                        Margin="45,0,0,0"  
                                        ClassId="{Binding ClassID4}"  
                                        EnableSource="{Binding ImageSrc4}"  
                                        HeightRequest="270"  
                                        HorizontalOptions="StartAndExpand"  
                                        ImageText="{Binding BtnName4}"  
                                        IsVisible="{Binding IsVisible4}"  
                                        OnClicked="BtnMainContentClick"  
                                        PressedSource="{Binding PressedImageSrc4}"  
                                        VerticalOptions="Center"  
                                        WidthRequest="270" />  
  
                                    <Ctrl:CtrlImageTextButton  
                                        Grid.Row="0"  
                                        Grid.Column="4"  
                                        Margin="45,0,45,0"  
                                        ClassId="{Binding ClassID5}"  
                                        EnableSource="{Binding ImageSrc5}"  
                                        HeightRequest="270"  
                                        HorizontalOptions="StartAndExpand"  
                                        ImageText="{Binding BtnName5}"  
                                        IsVisible="{Binding IsVisible5}"  
                                        OnClicked="BtnMainContentClick"  
                                        PressedSource="{Binding PressedImageSrc5}"  
                                        VerticalOptions="Center"  
                                        WidthRequest="270" />  
                                    <!--#endregion-->  
  
  
  
  
                                    <!--#region 두번째 줄-->  
                                    <Ctrl:CtrlImageTextButton  
                                        Grid.Row="1"  
                                        Grid.Column="0"  
                                        Margin="45,0,0,0"  
                                        ClassId="{Binding ClassID6}"  
                                        EnableSource="{Binding ImageSrc6}"  
                                        HeightRequest="270"  
                                        HorizontalOptions="StartAndExpand"  
                                        ImageText="{Binding BtnName6}"  
                                        IsVisible="{Binding IsVisible6}"  
                                        OnClicked="BtnMainContentClick"  
                                        PressedSource="{Binding PressedImageSrc6}"  
                                        VerticalOptions="Center"  
                                        WidthRequest="270" />  
  
                                    <Ctrl:CtrlImageTextButton  
                                        Grid.Row="1"  
                                        Grid.Column="1"  
                                        Margin="45,0,0,0"  
                                        ClassId="{Binding ClassID7}"  
                                        EnableSource="{Binding ImageSrc7}"  
                                        HeightRequest="270"  
                                        HorizontalOptions="StartAndExpand"  
                                        ImageText="{Binding BtnName7}"  
                                        IsVisible="{Binding IsVisible7}"  
                                        OnClicked="BtnMainContentClick"  
                                        PressedSource="{Binding PressedImageSrc7}"  
                                        VerticalOptions="Center"  
                                        WidthRequest="270" />  
  
                                    <Ctrl:CtrlImageTextButton  
                                        Grid.Row="1"  
                                        Grid.Column="2"  
                                        Margin="45,0,45,0"  
                                        ClassId="{Binding ClassID8}"  
                                        EnableSource="{Binding ImageSrc8}"  
                                        HeightRequest="270"  
                                        HorizontalOptions="StartAndExpand"  
                                        ImageText="{Binding BtnName8}"  
                                        IsVisible="{Binding IsVisible8}"  
                                        OnClicked="BtnMainContentClick"  
                                        PressedSource="{Binding PressedImageSrc8}"  
                                        VerticalOptions="Center"  
                                        WidthRequest="270" />  
  
                                    <Ctrl:CtrlImageTextButton  
                                        Grid.Row="1"  
                                        Grid.Column="3"  
                                        Margin="45,0,0,0"  
                                        ClassId="{Binding ClassID9}"  
                                        EnableSource="{Binding ImageSrc9}"  
                                        HeightRequest="270"  
                                        HorizontalOptions="StartAndExpand"  
                                        ImageText="{Binding BtnName9}"  
                                        IsVisible="{Binding IsVisible9}"  
                                        OnClicked="BtnMainContentClick"  
                                        PressedSource="{Binding PressedImageSrc9}"  
                                        VerticalOptions="Center"  
                                        WidthRequest="270" />  
  
                                    <Ctrl:CtrlImageTextButton  
                                        Grid.Row="1"  
                                        Grid.Column="4"  
                                        Margin="45,0,45,0"  
                                        ClassId="{Binding ClassID10}"  
                                        EnableSource="{Binding ImageSrc10}"  
                                        HeightRequest="270"  
                                        HorizontalOptions="StartAndExpand"  
                                        ImageText="{Binding BtnName10}"  
                                        IsVisible="{Binding IsVisible10}"  
                                        OnClicked="BtnMainContentClick"  
                                        PressedSource="{Binding PressedImageSrc10}"  
                                        VerticalOptions="Center"  
                                        WidthRequest="270" />  
                                    <!--#endregion-->  
  
                                </Grid>      
                            </DataTemplate>  
                        </CarouselView.ItemTemplate>  
                    </CarouselView>  





 public class MeasureType  
    {  
        public string BtnName1 { get; set; }  
        public string BtnName2 { get; set; }  
        public string BtnName3 { get; set; }  
  
        public string ClassID1 { get; set; }  
        public string ClassID2 { get; set; }  
        public string ClassID3 { get; set; }  
  
        public bool IsVisible1 { get; set; }  
        public bool IsVisible2 { get; set; }  
        public bool IsVisible3 { get; set; }  
  
        public ImageSource ImageSrc1 { get; set; }  
        public ImageSource ImageSrc2 { get; set; }  
        public ImageSource ImageSrc3 { get; set; }  
  
        public ImageSource PressedImageSrc1 { get; set; }  
        public ImageSource PressedImageSrc2 { get; set; }  
        public ImageSource PressedImageSrc3 { get; set; }  
  
  
        public MeasureType()  
        {  
  
        }  
  
    }  

I am currently binding like this
Whenever the button is incremented, it becomes cumbersome to create a variable.
Is it possible to get BtnName as list in MeasureType class and bind like this in xaml {Binding BtnName[0]} ?

256600-image.png

This is the final result I want to achieve.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,314 questions
0 comments No comments
{count} votes

Accepted answer
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 37,826 Reputation points Microsoft Vendor
    2022-11-03T08:41:11.227+00:00

    Hello,

    Is it possible to get BtnName as list in MeasureType class and bind like this in xaml {Binding BtnName[0]} ?

    No, it is no possible to do it in DataTemplate.

    You could use CarouselView with a nested Grid CollectionView to implement the UI you shared, please refer to the following code:

    Step 1. Modify the MeasureType.

       public class MeasureType   
           {  
               public ObservableCollection<ButtonProperties> buttonProperties { get; set; }  
         
               public MeasureType()  
               {  
                   buttonProperties = new ObservableCollection<ButtonProperties>();  
               }  
               public void AddItem(ButtonProperties Properties)  
               {  
                   buttonProperties.Add(Properties);  
               }  
           }  
           public class ButtonProperties  
           {  
               public string BtnName { get; set; }  
               public bool IsVisible { get; set; }  
         
               public ButtonProperties(string name, bool IsVisible)  
               {  
                   BtnName = name;  
                   this.IsVisible = IsVisible;  
               }  
           }  
    

    Step 2. Create a ContentView to show the buttons:

       <ContentView xmlns="http://xamarin.com/schemas/2014/forms"   
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                    x:Name="this"  
                    x:Class="App2.Views.GridCollection">  
         <ContentView.Content>  
               <CollectionView ItemsSource="{Binding buttonProperties}" ItemsLayout="HorizontalGrid, 2">  
                   <CollectionView.ItemTemplate>  
                       <DataTemplate>  
                           <Button Text="{Binding BtnName}" IsVisible="{Binding IsVisible}"/>  
                       </DataTemplate>  
                   </CollectionView.ItemTemplate>  
               </CollectionView>  
           </ContentView.Content>  
       </ContentView>  
    

    In my sample, I used the simplest style to show it. You could refer to Horizontal grid to get more details about how to set the horizontal grid.

    Step 3. Use the CollectionView in the CarouselViewPage:

       <CarouselView ItemsSource="{Binding MeasureTypes}" >  
               <CarouselView.ItemTemplate>  
                   <DataTemplate>  
                       <views:GridCollection/>  
                   </DataTemplate>  
               </CarouselView.ItemTemplate>  
       </CarouselView>  
    

    Best Regards,

    Alec Liu.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. 영훈 정 281 Reputation points
    2022-11-03T23:12:07.87+00:00

    Thank you for answer.

    0 comments No comments