How to increase binded progress property in view model

michalgizamichalgiza Member ✭✭
edited December 2018 in Xamarin.Forms

Hello developers! :smile:

I'm begginer in xamarin ,For some time i'm trying to implement a progress bar which will be increasing by tapping a image assing to it. My problem is that i can't figure out how to get access to Bindable property in my viewmodel. When i copied my model properties to viewmodel still no result, my dream solutions is that model's properties will stay in a model becouse i implement a observable object to this and create observable collection which is binded to listview in my page.xaml file. Can i ask you for some tips or guide my throught this step of my project ?

My code from ViewModel :

` public class SurfBoardViewModel : BaseViewModel
{
public ObservableRangeCollection Boards { get; }
public SurfBoardViewModel()
{

        Boards = new ObservableRangeCollection<SurfBoard>
        {

            new SurfBoard()
            {
                Counter =0.2, Icon="icon.png"
            },
            new SurfBoard()
            {
                Counter= 0.1, Icon="icon.png"
            },
            new SurfBoard()
            {
                Counter =.8, Icon ="icon.png"
            },
            new SurfBoard()
            {
                Counter= .3, Icon="icon.png"
            },
            new SurfBoard()
            {
                Counter = 0.2, Icon="icon.png"
            }
        };



        AddProgressCommand = new Command(AddProgress);

    }

   private void AddProgress()
    {

    }

    public Command SetBusyCommand { get; }
    public Command AddProgressCommand { get; }

//My last step was to copy property from model class and make it observable object to remain all functionality as it was but still no result :neutral:

    public class SurfBoard : ObservableObject
    {
        public SurfBoard()
        {

        }

        double counter;
        public double Counter
        {
            get { return counter; }
            set
            {
                if (SetProperty(ref counter, value))
                {
                    Debug.WriteLine("Counter changed");
                }
            }
        }

        string icon;
        public string Icon
        {
            get { return icon; }
            set
            {
                if (SetProperty(ref icon, value))
                {
                    Debug.WriteLine("Icon Changed");
                }
            }
        }

    }`

Code from page xaml

`

    <ListView x:Name="listView" ItemsSource="{Binding Boards}" HasUnevenRows="True" 
              Margin="10">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>


                        <ProgressBar x:Name="progressBar"
                                     Grid.Row="0" Grid.RowSpan="2"
                                     Grid.Column="0"
                                     Progress="{Binding Counter}"
                                     />


                        <Image x:Name="icon"
                                   Grid.Row="0" Grid.RowSpan="2"
                                   Grid.Column="1"
                                   WidthRequest="60"
                                   HeightRequest="60"
                                   Source="{Binding Icon}"
                                   >
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer NumberOfTapsRequired="2"
                                                      Command="{Binding AddProgressCommand}"/>
                            </Image.GestureRecognizers>
                        </Image>


                    </Grid>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>`

Best Answer

  • NicolasKrierNicolasKrier FR ✭✭✭
    edited December 2018 Accepted Answer

    Hello :)
    Welcome !

    Your problem is that your cell has a bindingContext set to the model associated. You don't have a AddProgressCommand in your SurfBoard view model.

    There is 2 options : either you add the command in your model or you change the binding source of your button's command to target a control outside the data template (for instance, your listView).

    Try that :
    <TapGestureRecognizer NumberOfTapsRequired="2" Command="{Binding BindingContext.AddProgressCommand, Source={x:Reference listView}}"/>

    If you are beginning, may I suggest you to download and use XamlStyler ? It's an awesome plugin to format your XAML. Another thing, it's just a matter of fashion but if I was you, I would name my private field like this :
    string icon; ====> private string _icon.
    Why ? Because if inside a method you want to add a local var with a name like icon, you will need to say this.icon to access to your field. Once you start prefixing your var with this, you end up prefixing all the things with this :)
    I had the same habit as you and it hurts a lot when working with other people who doesn't like to prefix things with this or to prefix private fields with an underscore.

    Have a good luck in your development !

Answers

  • NicolasKrierNicolasKrier FRMember ✭✭✭
    edited December 2018 Accepted Answer

    Hello :)
    Welcome !

    Your problem is that your cell has a bindingContext set to the model associated. You don't have a AddProgressCommand in your SurfBoard view model.

    There is 2 options : either you add the command in your model or you change the binding source of your button's command to target a control outside the data template (for instance, your listView).

    Try that :
    <TapGestureRecognizer NumberOfTapsRequired="2" Command="{Binding BindingContext.AddProgressCommand, Source={x:Reference listView}}"/>

    If you are beginning, may I suggest you to download and use XamlStyler ? It's an awesome plugin to format your XAML. Another thing, it's just a matter of fashion but if I was you, I would name my private field like this :
    string icon; ====> private string _icon.
    Why ? Because if inside a method you want to add a local var with a name like icon, you will need to say this.icon to access to your field. Once you start prefixing your var with this, you end up prefixing all the things with this :)
    I had the same habit as you and it hurts a lot when working with other people who doesn't like to prefix things with this or to prefix private fields with an underscore.

    Have a good luck in your development !

  • michalgizamichalgiza Member ✭✭

    Hi ! Thank you for that fast reply! :smile:

    I 'll tried my best to follow your guide! :blush:

Sign In or Register to comment.