I have this code in my application:
<StackLayout x:Name="pfs" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout Grid.Row="0" Grid.Column="1" Padding="0,0,20,0" Orientation="Horizontal"
HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand">
<Label x:Name="scoreCountLabel"
TextColor="{Binding BindingContext.TickMarkColor, Source={Reference pfs}}"/>
</StackLayout>
I am trying to understand how the TextColor is set. Can someone explain to me why the developer has set the Source={Reference pfs}
Why is this needed as it's already inside a StackLayout with the name of pfs?
It's completely unnecessary from what I can tell. BindingContext is inherited by all subviews, so referencing the parent view's BindingContext is redundant.
TextColor="{Binding TickMarkColor}"/>
Done.
Related
Is it possible to implement auto-scrolling when a user drags an item to the edge of visibible part of a CollectionView? Or StackLayout. Look's like there is no way to do this out of the box and no respective nuget packages exist. I've tried to implement this myself, but couldn't figure out which methods to override and for which of the entities. DragGestureRecognizer seemed to be promising, but still- no luck.
Here are the codes I used,drag one item to the edge and the list will scroll until reach the last item.
<ContentPage.BindingContext>
<local:PeopleViewModel/>
</ContentPage.BindingContext>
<StackLayout>
<Frame BackgroundColor="AliceBlue">
<CollectionView x:Name="mycol" ItemsSource="{Binding pgs}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="10" BackgroundColor="LightPink">
<Label Text="{Binding Name}" FontSize="Large">
<Label.GestureRecognizers>
<DragGestureRecognizer DragStarting="OnDragstarting"/>
</Label.GestureRecognizers>
</Label>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Frame>
</StackLayout>
</ContentPage>
I've created a custom CheckBox control to which I have added a Command/CommandParameter capability. I tried this using a Behavior and ran into the same problem. Here is my XAML:
`<ContentPage.BindingContext>
<vm:ShoppingListViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<CollectionView ItemsSource="{Binding MyShoppingList}"
SelectionMode="None"
EmptyView="No items in your Shopping List">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="0" ColumnDefinitions="30, *, 200">
<controls:CheckBoxEx x:Name="CompletedCheckBox"
IsChecked="{Binding Completed, Mode=TwoWay}"
Command="{Binding ToggledCommand}"
CommandParameter="{Binding .}"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Label Text="{Binding ItemName}" Grid.Column="1" HorizontalOptions="StartAndExpand" VerticalOptions="Center"/>
<Label Text="{Binding StoreName}" Grid.Column="2" HorizontalOptions="EndAndExpand" VerticalOptions="Center"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage.Content>
`
The BindingContext for my CollectionView is clearly my ViewModel; MyShoppingList is an ObservableCollection created in the ViewModel. The CheckBox IsChecked value is located in my Model as the Completed property. The Command, however, is not found because CollectionView apparently changes the BindingContext from the ViewModel to the Model, hence the Completed, ItemName, and StoreName properties are properly bound. How can I associate the Command with the ViewModel so that the Binding occurs correctly? The purpose of the Command is to trigger a database update. Here is the runtime error I see:
[0:] Binding: 'ToggledCommand' property not found on 'ShoppingList.Models.ShoppingListItem', target property: 'GLLCustomControls.CheckBoxEx.Command'
something like this should work
Command="{Binding Source={RelativeSource AncestorType={x:Type vm:ShoppingListViewModel}}, Path=ToggledCommand}"
the Xamarin docs have multiple examples of more complex binding scenarios
I have a List view with fixed Row Height. Inside List view there is Label with large description. I am trying to make this label scroll able. Can anyone help please.
<ListView ItemsSource="{Binding ServiceList, Mode=TwoWay}" RowHeight="100">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:ServiceModel">
<ViewCell>
<ScrollView
Margin="0"
Padding="0"
HeightRequest="50">
<Label
LineBreakMode="WordWrap"
Style="{StaticResource blackColorLabel}"
Text="{Binding ServiceDescription}" />
</ScrollView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
As mentioned in the comments, you shouldn't nest scrollviews because the behavior is erratic. You can use BindableLayout though.
<StackLayout BindableLayout.ItemsSource="{Binding ServiceList}">
<BindableLayout.ItemTemplate>
<DataTemplate x:DataType="models:ServiceModel">
<ScrollView
Margin="0"
Padding="0"
HeightRequest="50">
<Label
LineBreakMode="WordWrap"
Style="{StaticResource blackColorLabel}"
Text="{Binding ServiceDescription}" />
</ScrollView>
</DataTemplate>
</BindableLayout.ItemTemplate>
RowHeight is not a thing for BindableLayouts, but you could probably wrap your Label in a ContentView and set the HeightReqeust of the ContentView to 100. Or maybe even just set your Label Height Request to 100 and see what that does.
I have a Xamarin Carousel view with the PeakAreaInsets set pretty high so that I can see multiple items in the list at once. However I notice that the current item when set to snap, aligns it self more with the top of the page when I would like it to snap to the center of the page. How can I accomplish this?
Here is a snippet of the code in question:
<ContentPage.Content>
<CarouselView ItemsSource="{Binding Days}"
CurrentItem="{Binding SelectedDay}"
VerticalOptions="Center"
HorizontalOptions="Center"
PeekAreaInsets="300"
x:Name="DayCarousel">
<CarouselView.ItemsLayout>
<LinearItemsLayout SnapPointsAlignment="Center"
SnapPointsType="Mandatory"
Orientation="Vertical"/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout Spacing="0"
Orientation="Vertical"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="30,10">
<Label Text="{Binding FormattedDate}"
HorizontalOptions="Center"
VerticalOptions="Center"
Style="{StaticResource LabelStyle}"/>
<Label Text="{Binding TitleText}"
HorizontalOptions="Center"
VerticalOptions="Center"
Style="{StaticResource LabelHeader1Style}"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.SelectDay, Source={x:Reference this}}"
CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</ContentPage.Content>
Here is about what it looks like now (just a mock up):
And here is what I would like it to look like:
I ended up playing around with it for a bit. I'm not sure how its going to look on other phone formats and sizes since I haven't tested that yet. But eventually I found a happy medium after tweaking the PeakAreaInsets, and adjusting the SnapPointsAlignment. Currently I have it set to PeakAreaInsets = 350 and SnapPointsAlignment="Start"
I'm making a simple listview and got a problem with iOS header - I want to make it transparent, but the problem is, that listview items are sliding under heading. What I want to achieve, is that heading will slide up with listview items.
This is how it looks now
And this is how current code looks like:
<ListView x:Name="SingleBeanView"
ItemsSource="{Binding Beans}"
IsGroupingEnabled="true"
Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
BackgroundColor="Transparent">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell ios:Cell.DefaultBackgroundColor="Transparent" Height="52">
<Label Text="{Binding Heading}" TextColor="{StaticResource LightTextColor}" FontSize="Large" HorizontalOptions="Start" VerticalOptions="Start" Margin="15,10,0,0"/>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Field1}"/>
<Label Text="{Binding Field2}"/>
<Label Text="{Binding Field3}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Unfortunately , if using GroupHeader in ListView , this can not achieve your want.This effect is designed by Apple . If want to modify ,this need more things and time to do about customing listview.
Here is a solution for native ios, you can have a try with custom renderer to do.However, after testing this can not work in Xamarin.
So the last way maybe need custom cell to realize it--Puttinng header in Cell . Then That means you can not use GroupHeaderTemplate.
Another discussion.