WP7 Using binding how can I manage data relevant on prior items - data-binding

When I am binding to a collection with a listbox, is there any way I can manage the output based upon the prior items that were displayed in the collection.
For example in the following binding
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="AgendaListbox"
ItemsSource="{Binding AgendaItems2}"
ItemTemplate="{StaticResource EventDisplay3}"/>
</Grid>
Where the Template is as follows
<DataTemplate x:Key="EventDisplay3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="10"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding DateTimeDayString}" Style="{StaticResource PhoneTextSmallStyle}"
Grid.Row="0" Grid.Column="0"/>
<TextBlock Text="{Binding DisplayTimeString}" Foreground="{Binding DisplayColor}"
Grid.Row="1" Grid.Column="0" Style="{StaticResource PhoneTextLargeStyle}"/>
<TextBlock Text="{Binding Details}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}"
Grid.Row="0" FontSize="30" Grid.Column="2" Grid.RowSpan="3"
VerticalAlignment="Center" />
<TextBlock Text="{Binding Location}" Style="{StaticResource PhoneTextSmallStyle}"
Grid.Row="3" Grid.Column="0"/>
</Grid>
</DataTemplate>
If I want to alter the display based upon they previous item that was displayed (e.g say I want to drop the DateTimeString Binding if its identical to the previous one) is there a way that I can do it without having to make specific allowance for it when I build up the collecton.
Because so much happens automatically as it were with the listbox being bound to that collection I cannot see any other way without me handling this as the collection is being built... because after that I have little control.
Thanks

Is there any way I can manage the output based upon the prior items that were displayed in the collection?
No.
You have to do such changes when you build the collection. Consider if using a DataTemplateSelector can be of any help.

Related

Xamarin.Forms: Add item to certain row of grid from code

in my XAML I have this grid:
<Grid Grid.Row="12" Grid.Column="1" ColumnSpacing="0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<!--Label-->
<RowDefinition Height="3*" ></RowDefinition>
<!--ProfilePic-->
<RowDefinition Height="*"></RowDefinition>
<!-- Btn change-->
</Grid.RowDefinitions>
<BoxView BackgroundColor="Purple" Grid.Row="1"></BoxView>
<ImageButton
Grid.Row="2"
x:Name="row_forpic_editProfile"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
<Label
Grid.Row="0"
FontSize="16"
TextColor="#272727"
VerticalOptions="End"
Text="Proilfbild"
FontFamily="arial"
/>
<Button
Grid.Row="2"
x:Name="btn_changepic_editprofile"
Text="Ă„ndern"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
</Grid>
This is the result of that:
The result
Now, I want to add an imageview into the purple row (which is Grid.Row="1") from code because I downloaded a picture from the internet.
How can I now add my new Image (ImageButton) into this exact row? (row 1)
And also have it maintain its dimensions (only the picture must full the container).
thank you:)
to add a View to a Grid
myGrid.Children.Add(view,col,row);

Overlapping frame in a grid xamarin forms

I am using the latest xamarin forms.
I have a requirement that I need to position a frame between 2 rows in a grid.
I could not make it work with absolute layout or flex layout. Below is my simplified attempt with a grid
<Grid ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="8*"/>
</Grid.RowDefinitions>
<Grid BackgroundColor="Red" Grid.Row="0">
<Label Text="Add some stuff here"></Label>
</Grid>
<Grid BackgroundColor="Blue" Grid.Row="1">
<Frame BackgroundColor="Green" HeightRequest="100" WidthRequest="100" Margin="20,-150,20,20"></Frame>
</Grid>
</Grid>
This is my UNWANTED RESULT
I cannot seem to set the heighrequest of the frame as it remains big.
What is the best approach to overlay a frame between 2 rows?
thanks
For your layout, you can use AbsoluteLayout in the following manner:
<AbsoluteLayout BackgroundColor="Blue" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Pink" AbsoluteLayout.LayoutBounds="1,0,1,0.5" AbsoluteLayout.LayoutFlags="All" />
<StackLayout AbsoluteLayout.LayoutBounds="1,1,1,0.5" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Beige"/>
<Frame AbsoluteLayout.LayoutBounds="0.5,0.5,0.8,0.5" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" CornerRadius="20" />
</AbsoluteLayout>
You will get the following design from the above implementation.

Xamarin Forms: Not able to create a corner radius for a two column layout

I'm trying to create a grid layout with a height of 8px with cornered radius horizontally as below snapshot.
: https://ibb.co/s1dkpnw
<Grid Margin="0,0,0,24" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*">
</ColumnDefinition>
<ColumnDefinition Width="4*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8">
</RowDefinition>
</Grid.RowDefinitions>
<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
<Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
</Frame>
</Grid>
I'm able to get the UI as in the below snapshot.
: https://ibb.co/7nLTgdL
I'm not able to get the UI displyed within the frame visible, although i'm getting a cornered radius for a two columned layout. It just shows a empty frame.
Please let me know how to design the XAML UI to get the UI as in the design snapshot.
Got the UI aligned by pushing the Grid within the frame control as below,
<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*">
</ColumnDefinition>
<ColumnDefinition Width="4*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8">
</RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
<Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
</Grid>
</Frame>
AbsoluteLayout can help you:
<AbsoluteLayout HorizontalOptions="Center">
<Frame
AbsoluteLayout.LayoutBounds="0,0,150,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#0086C9"
CornerRadius="7" />
<Frame
AbsoluteLayout.LayoutBounds="120,0,150,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#D8D8D8"
CornerRadius="7" />
<Frame
AbsoluteLayout.LayoutBounds="120,0,30,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#0086C9"
CornerRadius="1" />
</AbsoluteLayout>
Output: https://i.ibb.co/jh6QmBL/ss.png

Xamarin.Forms: Getting the position from a tapped Image inside a Listview

I want to save the position of the tapped Image inside my ListView. It's a Tapped event so it doesn't count as ItemSelected.
It's a simple ListView and each element has a "star" image to mark as favourite. It could work browse the ListView and get the positions where the Image is the "filled star" on the OnDisappearing() saving them on an array for example.
ListView Structure:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0"/>
<Image Grid.Row="0" Grid.Column="1"/>
<Image x:Name="imageFavourite"
Source="starBorder.png"
Scale="0.5"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="0" Grid.Column="2">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imageFavourite_Tapped"
NumberOfTapsRequired="1"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
How can I do this?
Here is an example of how to get the command parameters working with casting the binding instead of the way that you're doing it.
Here is the image xaml set up:
<Image x:Name="DeleteImage"
Source="ic_delete.png"
Margin="25,0,0,0">
<Image.GestureRecognizers>
<TapGestureRecognizer CommandParameter="{Binding .}" Tapped="DeleItem" NumberOfTapsRequired="1"/>
</Image.GestureRecognizers>
</Image>
Here is the C# backend for the tap gesture recognizer (note: this is using a TappedEventArgs not EventArgs!):
async void DeleItem(object sender, TappedEventArgs args)
{
var row = (YOUR-OBJECT-CAST)args.Parameter;
System.Diagnostics.Debug.Write($"Row clicked: (your object) {row.ID}");
}

Silverlight Expander.Header with additional button

When the Complete Survey button on the Expander.Header is clicked, I would like to Navigate to another page and pass along some information from the viewmodel. I have the expander working so that when its selected it expands, and the selecteditem property is properly bound and filled. However if I just click right to the button, the selecteditem does not change and is not even populated if its the first action. How can I trigger the selected item if the button control is pressed before the expander is selected? I would prefer an MVVM solution if possible. Thanks
<ListBox x:Name="SearchList"
Grid.Row="1"
Margin="5,0,5,0"
Grid.Column="0"
Background="Transparent"
BorderThickness="0"
BorderBrush="Transparent"
ItemsSource="{Binding Path=SearchResults}"
SelectedItem="{Binding Path=SelectedResult,Mode=TwoWay,Converter={StaticResource DebugConverter}}"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:Expander>
<sb:BindingHelper.Binding>
<sb:RelativeSourceBinding TargetProperty="IsExpanded"
Path="IsSelected"
RelativeMode="FindAncestor"
AncestorType="ListBoxItem" BindingMode="TwoWay" />
</sb:BindingHelper.Binding>
<toolkit:Expander.Header>
<Grid Width="525">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="25" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="{Binding Path=PatientName}" />
<Button Grid.Column="2"
Grid.Row="0"
Content="Complete Survey">
<sb:BindingHelper.Binding>
<sb:RelativeSourceBinding Path="OpenSurveyCommand"
TargetProperty="Command"
RelativeMode="ParentDataContext" />
</sb:BindingHelper.Binding>
</Button>
</Grid>
</toolkit:Expander.Header>
<StackPanel>
<TextBlock Text="{Binding MRN,Converter={StaticResource StringLabelConverter},ConverterParameter=MRN}" />
<TextBlock Text="{Binding OriginalVisitNumber,Converter={StaticResource StringLabelConverter},ConverterParameter='Original Visit Number'}" />
<TextBlock Text="{Binding OriginalAdmitDate,Converter={StaticResource StringLabelConverter},ConverterParameter='Original Admit Date'}" />
<TextBlock Text="{Binding OriginalReason,Converter={StaticResource StringLabelConverter},ConverterParameter='Original Reason'}" />
<TextBlock Text="{Binding ReAdmitVisitNumber,Converter={StaticResource StringLabelConverter},ConverterParameter='ReAdmit Visit Number'}" />
<TextBlock Text="{Binding ReAdmitDate,Converter={StaticResource StringLabelConverter},ConverterParameter='Readmit Date'}" />
<TextBlock Text="{Binding ReAdmitReason,Converter={StaticResource StringLabelConverter},ConverterParameter='ReAdmit Reason'}" />
</StackPanel>
</toolkit:Expander>
</DataTemplate>
</ListBox.ItemTemplate>
I'm not familiar with the BindingHelper class you're using but if it's using the standard commanding in the background then I'd bind the command parameter to the "item".
That way you have access to the bound item in the commands executed event.
Using a collection of viewmodels with the button in the viewmodel solved this. No special magic other than the ObservableCollectionVM

Resources