I Installed CarouselView.FormsPlugin 6.0.0 on PCL Project
It's Working Fine on Android But When I Use On Ios facing Frame height not cover fully on CarouselView ItemTemplate
Code:-
<StackLayout>
<RefreshView>
<CollectionView x:Name="CollView">
<CollectionView.ItemTemplate>
<DataTemplate>
<cv:CarouselViewControl HeightRequest="110" AnimateTransition="False" ShowIndicators="True" Position="0" InfiniteScrolling="True" InterPageSpacing="20" VerticalOptions="Fill" HorizontalOptions="FillAndExpand" IsSwipeEnabled="True" AutoplayInterval="5" IndicatorsTintColor="#E5E5E5" ItemsSource="{Binding HomeDisplayOffers}" HorizontalIndicatorsPosition="Bottom">
<cv:CarouselViewControl.ItemTemplate >
<DataTemplate >
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Frame Padding="0" HeightRequest="110" "HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<!--- Binding Source Code --->
</Frame>
</StackLayout
</DataTemplate >
</cv:CarouselViewControl.ItemTemplate>
</cv:CarouselViewControl>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
</StackLayout>
pls Check the Attached Screenshot.. Some Frame Coverup and Some Frame Getting Space on Bottom
That has nothing to do with the control and everything to do with your XAML code, Giving it a static height is going to obviously do this, options that you have are quite simple to be honest get a container that covers the whole frame like Absolute or Grid
<AbsoluteLayout>
<cv:CarouselViewControl AnimateTransition="False" ShowIndicators="True" Position="0" InfiniteScrolling="True" InterPageSpacing="20" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All" VerticalOptions="Fill" HorizontalOptions="FillAndExpand" IsSwipeEnabled="True" AutoplayInterval="5" IndicatorsTintColor="#E5E5E5" ItemsSource="{Binding HomeDisplayOffers}" HorizontalIndicatorsPosition="Bottom">
<cv:CarouselViewControl.ItemTemplate >
<DataTemplate >
<Frame Padding="0">
<!--- Binding Source Code --->
</Frame>
</StackLayout
</DataTemplate >
</cv:CarouselViewControl.ItemTemplate>
</cv:CarouselViewControl>
</AbsoluteLayout>
Related
I am using a Material Card on my Uno based app. It works great- except I am trying to add a Pathicon for MediaContent and am having trouble getting it to work. I tried overriding the Image source in the template- but that did not work- I may not have done that right. Essentially I want a Pathicon where the .png or jpg would go. Any suggestions on how to accomplish this would be appreciated.
<material:Card HeaderContent="Outlined card"
SubHeaderContent="With title and subtitle only"
MediaContent=""
Style="{StaticResource MaterialOutlinedCardStyle}"
PointerExited="eventPageClick">
<material:Card.HeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,14,16,0"
Style="{ThemeResource MaterialHeadline6}" />
</DataTemplate>
</material:Card.HeaderContentTemplate>
<material:Card.SubHeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,0,16,14"
Style="{ThemeResource MaterialBody2}" />
</DataTemplate>
</material:Card.SubHeaderContentTemplate>
<material:Card.MediaContentTemplate>
<DataTemplate>
<Image Source="{Binding}"
Stretch="Uniform"
MaxHeight="194" />
</DataTemplate>
</material:Card.MediaContentTemplate>
</material:Card>
Great question!
Using the MediaContentTemplate, you should be able to place anything that you want in the DataTemplate, including PathIcons. Only thing is that the MediaContentTemplate will only be loaded if the MediaContent property is not null or an empty string. So I would do something like setting the the Path Data string to MediaContent and then use a Binding in the MediaContentTemplate to the PathIcon's Data property, like so:
<material:Card HeaderContent="Outlined card"
SubHeaderContent="With title and subtitle only"
MediaContent="PASTE PATH DATA HERE"
Style="{StaticResource MaterialOutlinedCardStyle}"
PointerExited="eventPageClick">
<controls:Card.MediaContentTemplate>
<DataTemplate>
<PathIcon Data="{Binding}"/>
</DataTemplate>
</controls:Card.MediaContentTemplate>
...
</material:Card>
Thank you sbilogan! You gave me the key to getting it working. They key was the text cant be empty for Media Content. It turns out I can put any text there and then add the Pathicon like below and that works. Thank you so much for your help!
<material:Card HeaderContent="Outlined card3"
SubHeaderContent="With title and subtitle only"
Style="{StaticResource MaterialOutlinedCardStyle}"
MediaContent="Example"
PointerExited="eventPageClick">
<material:Card.HeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,14,16,0"
Style="{ThemeResource MaterialHeadline6}" />
</DataTemplate>
</material:Card.HeaderContentTemplate>
<material:Card.SubHeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,0,16,14"
Style="{ThemeResource MaterialBody2}" />
</DataTemplate>
</material:Card.SubHeaderContentTemplate>
<material:Card.MediaContentTemplate>
<DataTemplate>
<PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" Data="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</DataTemplate>
</material:Card.MediaContentTemplate>
</material:Card>
I'm working on a Xamarin.Forms.Shell app containing 4 tabs. I would like to display a common Title containing a centered SVG logo on all these pages.
For this, I can use a TitleView like this:
<Shell.TitleView>
<ffimageloadingsvg:SvgCachedImage Source="resource://ShellAppSample.Resources.logoTitle.svg"
DownsampleHeight="6"
HeightRequest="45"/>
</Shell.TitleView>
This works and the logo is well centered in the NavigationBar. However, if the page contains ToolbarItems, the logo is no longer centered.
For example, on a page I've a ToolBarItem like this:
<ContentPage.ToolbarItems>
<ToolbarItem Text="Refresh"
Order="Primary"
Priority="0"
Command="{Binding RefreshCommand}"
CommandParameter="{x:Reference webView}">
<ToolbarItem.IconImageSource>
<FontImageSource Glyph="{StaticResource FalIconRefresh}"
FontFamily="FontAwesomeLight"
Size="Medium"/>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
Is there another way to display a centered Image from a SVG as Title, by using CustomRenderer or calculating the size of the ToolbarItems?
I've seen that a similar question has already been posted 1 year ago, but without any solution...
I've already tried to redraw the ToolbarItem in the TitleView like this:
<Shell.TitleView>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
BackgroundColor="Transparent">
<ffimageloadingsvg:SvgCachedImage Source="resource://ShellAppSample.Resources.blackLogoTitle.svg"
DownsampleHeight="6"
HorizontalOptions="CenterAndExpand"
HeightRequest="45"
BackgroundColor="Transparent"/>
<Image HorizontalOptions="End" VerticalOptions="CenterAndExpand"
BackgroundColor="Transparent">
<Image.Source>
<FontImageSource Glyph="{StaticResource FalIconRefresh}"
FontFamily="FontAwesomeLight"
Size="Medium"/>
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding RefreshCommand}" CommandParameter="{x:Reference webView}"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</Shell.TitleView>
On iOS it's correct, but I can see that:
the logo is not exactly centered like on the pages that don't contain any ToolBarItem, as there is a small gap when I switch between the pages
the icon is not positioned like when I use a ToolBarItem
On Android, the result it's not correct: the logo hasn't the same height, and the icon is out of the TitleView.
Finally I've managed my TitleViews like this:
For the Image:
<Shell.TitleView >
<Image Source="resource://ShellAppSample.Resources.logo.jpg"
VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
Margin="{OnPlatform Android='0,0,16,0', Default=0}"/>
</Shell.TitleView>
For the Label:
<Shell.TitleView>
<Label Text="{Binding Title}"
VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
Margin="{OnPlatform Android='0,0,16,0', Default=0}"/>
</Shell.TitleView>
And for Label with one "medium" size ToolBarItem:
<Shell.TitleView>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Title}"
Grid.Column="1"
VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
Margin="{OnPlatform Android='0,0,16,0', Default=0}"/>
</Grid>
</Shell.TitleView>
<ContentPage.ToolbarItems>
<ToolbarItem Text="Refresh"
Order="Primary"
Priority="1"
Command="{Binding RefreshCommand}">
<ToolbarItem.IconImageSource>
<FontImageSource Glyph="{StaticResource FalIconRefresh}"
FontFamily="FontAwesomeLight"
Size="Medium"/>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
I've checked the alignment through the DebugRainbows package and it looked fine on iOS/Android, on small/large devices.
It's not perfect, and I need to update rules if I add other ToolBarItems but it worked like this.
I've got a Flyout view with a TextBlock in it. The text block has more than one line's amount of text and I'd like it to wrap to the next line like it usually does, but when used in a Flyout it scrolls off the screen... How do you disable the scroll view in a Flyout?
Flyout XAML:
...
<AppBarButton.Flyout>
<Flyout Placement="Full">
<local:MyView/>
</Flyout>
</AppBarButton.Flyout>
...
My View XAML:
<UserControl ...>
<Grid>
...
<TextBlock Text="Loading..." Style="{ThemeResource SubtitleTextBlockStyle}" Margin="10,0,10,20" Grid.Row="1" TextWrapping="Wrap"/>
</Grid>
</UserControl>
It comes out like this:
To set properties of Flyout like width or scrollbar's visibility, we need to customize the style of FlyoutPresenter. Here is how I do it:
<Flyout Placement="Full" >
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"></Setter>
</Style>
</Flyout.FlyoutPresenterStyle>
<Grid>
<TextBlock Text="This is an informational flyout. Click outside to dismiss.xxxjfdalisfsadpfuaspdfoia" Grid.Row="1" TextWrapping="Wrap"/>
</Grid>
</Flyout>
Directly copy the into your Flyout element will meet your requirement.
You can
1) make a maxwidth to your flyout
or
2) try this :
<Flyout Placement="full" >
<Grid ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
........
</Grid>
</Flyout>
best of luck !
Let say that we have the above xaml in wp7 platform:
<controls:Panorama x:Name="MainPanorama">
<controls:PanoramaItem x:Name="Panorama1" TabIndex="1">
<controls:PanoramaItem.Header>
<StackPanel Orientation="Vertical" Margin="12,70,0,-30">
<TextBlock x:Name="Header1" Text="Downloader" FontSize="50" Margin="-5,-70,0,0" />
</StackPanel>
</controls:PanoramaItem.Header>
///////////////////////////////
other xaml code like grids and other
</controls:PanoramaItem>
///////////////////////////////
other xaml code like PanoramaItems
</controls:Panorama>
How can i get the TextBlock.Text (string) of Header1, notice that i want something dynamically as i have many PanoramaItems and i want to get header of every PanoramaItem dynamically like an array of MainPanorama.
I have tried this:
PanoramaItem gen_panorama = MainPanorama.SelectedItem as PanoramaItem;
gen_panorama_head = Convert.ToString(gen_panorama.Header);
but there is no Header as the header is in template of every PanoramaItem, how can i get this?
I found the solution with 'Binding' header data template!
<controls:Panorama x:Name="MainPanorama">
<controls:Panorama.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="12,70,0,-30">
TextBlock Text="{Binding}" FontSize="50" Margin="-12,-70,0,0" HorizontalAlignment="Left" Foreground="Black" />
</StackPanel>
</DataTemplate>
</controls:Panorama.HeaderTemplate>
<controls:PanoramaItem Header="Here any we want" x:Name="Panorama1" TabIndex="1">
</controls:PanoramaItem>
</controls:Panorama>
I am working on generating a list of check boxes with the first check box to be "SelectAll". SelectAll checkbox will check or uncheck all the check box in the list. However my check list is binding to a data source. Right now I want to put all check box including selectAll check box in the same wrappanel so that they can be wrapped together at the end of the panel.
<ContentControl Name="FilterContent">
<WrapPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<CheckBox Name="SelectedAll" MinWidth="100" Margin="2"
VerticalAlignment="Center" HorizontalAlignment="Left"
IsChecked="{Binding IsSelectAll, Mode=TwoWay}"
Content="{Binding Path=SelectAllText}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cmd:EventToCommand Command="{Binding Path=OnClickCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
<ItemsControl ItemsSource="{Binding StandardItems}"
Margin="2,5,2,-1"
BorderBrush="{x:Null}"
Background="Transparent"
Grid.ColumnSpan="2"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Name="ItemsPanel" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Name="ItemCheckBox"
MinWidth="100" Margin="2"
VerticalAlignment="Center" HorizontalAlignment="Left"
IsChecked="{Binding Path=IsChecked, Mode=TwoWay}"
Content="{Binding Path=Label}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</WrapPanel>
</ContentControl>
This piece of code does not allow me to do that, the result UI only have the items inside item control wrapped in the second line but not consider all check box in the same wrappanel. I need help on adding "SelectAll" check box to the wrappanel that is used by itemscontrol.
Thank you!
When loading the control I would add an empty StandardItem in the StandardItems list which will mean "select all". When I process the checkbox click event, I check if the item is an empty item and I use this as a call to "select all"