How to send data updwards? From a Datatemplate to above
Multi tool use
Clash Royale CLAN TAG#URR8PPPHow to send data updwards? From a Datatemplate to above
So I got this page when the user clicks the + and the - image buttons the TotalPrice label binding gets updated,no problem. This is in the Item Template binding. However, I need that whenever a product gets increased or decreased I need for the TotalOrderValue gets updated too. But I got no way to trigger the UpdateTotalOrderValue when something from the listview gets updated. How do I do this?
I tried events but couldn't get them to work as it couldn't communicate upwards.
This is the from the PAGE viewmodel
public decimal? TotalOrderValue
{
get { return totalOrderValue; }
set
{
totalOrderValue = value;
OnPropertyChanged();
}
}
private void UpdateTotalOrderValue()
{
foreach (var product in Items)
{
TotalOrderValue += product.Price;
}
}
This is the ProductModel/The DataTemplate the listview binds to
You can see my comment here of what I want to do.
public int ModelUpdateCount
{
get { return modelUpdateCount; }
set
{
if (value >= 0)
{
modelUpdateCount = value;
TotalPrice = modelUpdateCount * Price;
//ProductsPageViewModel.UpdateTotalOrderValu();
NotifyPropertyChanged();
}
}
}
public decimal? TotalPrice
{
get { return totalPrice; }
set
{
totalPrice = value;
NotifyPropertyChanged();
}
}
This is the page itself
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0" RowSpacing="5" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="60" />
<RowDefinition Height="*" />
<RowDefinition Height="120" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*" />
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<!--TOP LABELS-->
<!--LIST OF PRODUCTS IN THE SCROLLVIEW-->
<Label Margin="5" Grid.Row="1" Grid.Column="0" BackgroundColor="LightGray" HorizontalOptions="Fill" Text="IMAGE" Style="{StaticResource PanelText}" TextColor="Black" FontSize="20" VerticalOptions="Fill" />
<Label Margin="5" Grid.Row="1" Grid.Column="1" BackgroundColor="LightGray" HorizontalOptions="Fill" Text="ARTICLE" Style="{StaticResource PanelText}" TextColor="Black" FontSize="20" VerticalOptions="Fill" />
<Label Margin="5" Grid.Row="1" Grid.Column="2" BackgroundColor="LightGray" HorizontalOptions="Fill" Text="EAN NUMBER" Style="{StaticResource PanelText}" TextColor="Black" FontSize="20" VerticalOptions="Fill" />
<Label Margin="5" Grid.Row="1" Grid.Column="3" BackgroundColor="LightGray" HorizontalOptions="Fill" Text="DESCRIPTION" Style="{StaticResource PanelText}" TextColor="Black" FontSize="20" VerticalOptions="Fill" />
<Label Margin="5" Grid.Row="1" Grid.Column="4" BackgroundColor="LightGray" HorizontalOptions="Fill" Text="SIZE" Style="{StaticResource PanelText}" TextColor="Black" FontSize="20" VerticalOptions="Fill" />
<Label Margin="5" Grid.Row="1" Grid.Column="5" BackgroundColor="LightGray" HorizontalOptions="Fill" Text="SRP" Style="{StaticResource PanelText}" TextColor="Black" FontSize="20" VerticalOptions="Fill" />
<Label Margin="5" Grid.Row="1" Grid.Column="6" BackgroundColor="LightGray" HorizontalOptions="Fill" Text="PRIZE" Style="{StaticResource PanelText}" TextColor="Black" FontSize="20" VerticalOptions="Fill" />
<Label Margin="5" Grid.Row="1" Grid.Column="7" BackgroundColor="LightGray" HorizontalOptions="Fill" Text="QUANTITY" Style="{StaticResource PanelText}" TextColor="Black" FontSize="20" VerticalOptions="Fill" />
<Label Margin="5" Grid.Row="1" Grid.Column="8" BackgroundColor="LightGray" HorizontalOptions="Fill" Text="TOTAL" Style="{StaticResource PanelText}" TextColor="Black" FontSize="20" VerticalOptions="Fill" />
<ListView x:Name="lvItemsList"
ItemsSource="{Binding GroupedItems}"
IsGroupingEnabled="True"
GroupDisplayBinding="{Binding Key}"
GroupShortNameBinding="{Binding Key}"
HasUnevenRows="True"
Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="9" HorizontalOptions="FillAndExpand" Margin="5"
>
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="30">
<Frame BorderColor="Gray" Padding="5">
<Label Text="{Binding Key}" TextColor="Black" Font="Large" VerticalTextAlignment="Center" VerticalOptions="Center"/>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="60">
<Grid FlexLayout.Basis="100%" HeightRequest="60" Margin="5" RowSpacing="5" ColumnSpacing="10" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*" />
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage
Source="{Binding LocalImagePath}" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Aspect="AspectFill"
DownsampleToViewSize="true"
DownsampleHeight="180"
DownsampleWidth="120"
>
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=ViewModel.CmdImageTapped, Source={x:Reference Products}}"
CommandParameter="{Binding .}"
NumberOfTapsRequired="1"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<Label VerticalOptions="CenterAndExpand" Grid.Column="1" Text="{Binding SkuNumber}" Style="{StaticResource PanelText}" HorizontalTextAlignment="Start" TextColor="Black"/>
<Label VerticalOptions="CenterAndExpand" Grid.Column="2" Text="{Binding Ean13}" Style="{StaticResource PanelText}" HorizontalTextAlignment="Center" TextColor="Black"/>
<Label VerticalOptions="CenterAndExpand" Grid.Column="3" Text="{Binding ProductName}" Style="{StaticResource PanelText}" HorizontalTextAlignment="Start" TextColor="Black" FontAttributes="Bold" />
<Label VerticalOptions="CenterAndExpand" Grid.Column="4" Text="{Binding Size}" Style="{StaticResource PanelText}" HorizontalTextAlignment="Center" TextColor="Black"/>
<Label HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Grid.Column="5" Text="{Binding SalesRecommendedPrice}" Style="{StaticResource PanelText}" HorizontalTextAlignment="Center" TextColor="Black"/>
<Label HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Grid.Column="6" Text="{Binding PriceWithUnit}" Style="{StaticResource PanelText}" HorizontalTextAlignment="Center" TextColor="Black" FontAttributes="Bold"/>
<Grid VerticalOptions="CenterAndExpand" Grid.Column="7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Image="line_in_square.png" BackgroundColor="White" HorizontalOptions="Start" VerticalOptions="Start" Command="{Binding DeCrementCommand}" />
<Frame Grid.Column="1" BorderColor="Gray" HorizontalOptions="Fill" VerticalOptions="Center" Padding="8" >
<Label Text="{Binding ModelUpdateCount, StringFormat='{0}'}" FontSize="16" TextColor="Black" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
</Frame>
<Button BackgroundColor="White" Grid.Column="2" Image="plus_sign.png" HorizontalOptions="End" VerticalOptions="Start" Command="{Binding IncrementCommand}" />
</Grid>
<Label VerticalOptions="CenterAndExpand" Grid.Column="8" Text="{Binding TotalPrice, StringFormat='{0:C2}'}" Style="{StaticResource PanelText}" FontAttributes="Bold" TextColor="Black"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- Bottom Command Bar -->
<Grid Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="9" BackgroundColor="LightGray" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="360"/>
</Grid.ColumnDefinitions>
<Label Text="COMMENTS
/ PO NUMBER:" BackgroundColor="LightGray" VerticalOptions="Center" HorizontalOptions="Center" TextColor="Black" />
<Editor BackgroundColor="White" TextColor="Black" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="10,10,10,10" />
<Label Grid.Row="0" Grid.Column="2" VerticalOptions="End" HorizontalOptions="End" Text="£ 221212" Margin="0,0,20,0" FontSize="16"/>
<Label Grid.Row="0" Grid.Column="2" VerticalOptions="Center" HorizontalOptions="Start" FontSize="40" Text="{Binding TotalOrderValue}" Margin="35,0,0,0"/>
<Button Text="SUBMIT PART ORDER" Command="{Binding SubmitOrderCommand}" BackgroundColor="#088da5" FontAttributes="Bold" TextColor="White" Grid.Row="1" Grid.Column="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0,0,20,10"/>`enter code here`
Image for visuals if needed
https://gyazo.com/80f64e4146b6a661f983938d1fb5d1bf
It's the 0 that needs to be updated to be the total of all the products in the listview.
2 Answers
2
My suggestion is to add a listener to PropertyChanged event from your ProductModel in your PageViewModel:
public void AttachListener()
{
foreach (var product in Items)
{
production.PropertyChanged += OnOrderCountUpdate;
}
}
private void OnOrderCountUpdate(object sender, PropertyChangedEventArgs e)
{
if(e.PropertyName == "ModelUpdateCount")
UpdateTotalOrderValue();
}
You should attach the listener in OnAppearing() of your page, and remove it in OnDisappearing()
You could create a new class DataSource like this:
DataSource
public class PageVMDataSource
{
#region Attributes
private readonly PageVM pageVM;
private readonly ProductModel productModel;
#endregion
#region Public Methods
public PageVMDataSource(PageVM pageVM, ProductModel productModel)
{
this.pageVM = pageVM;
this.productModel= productModel;
}
public void Initialize()
{
this.productModel.PropertyChanged += this.OnProductModelPropertyChanged;
}
#endregion
#region Event Handlers
private void OnProductModelPropertyChanged(object sender, PropertyChangedEventArgs propertyChangedEventArgs)
{
switch (propertyChangedEventArgs.PropertyName)
{
case "ModelUpdateCount":
this.pageVM.UpdateTotalOrderValue;
break;
}
}
#endregion
}
When you create your VM and your Model, create a new instance of this DataSource so it subscribes to the model changes and execute your VM method.
DataSource
By doing this, you are applying SOLID and you can control everything that needs "communication"
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
