I am new to Xamarin. I am trying to create a sample in Xamarin forms with 5 custom horizontallistviews (I have used renderers to achieve the same in different platforms. It works perfectly (scrolls horizontally) when I have only 2 of these controls on screen. When I add all the 5 I have to add these controls inside a ScrollView oriented vertically so that I can see all the controls. When I do that I am only able to scroll the page vertically. I am not able to scroll the individual controls (horizontallistviews) horizontally.
This issue is only with Android. It works fine in Windows Phone.
Below is my code:
<ScrollView Orientation="Vertical">
<StackLayout Padding="5, 25" Orientation="Vertical" VerticalOptions="FillAndExpand">
<Image Source ="label_entertainment.png" HorizontalOptions="Start"/>
<local:HorizontalListViewEntertainment x:Name="entertainmentView" Items="{Binding Entertainment}" HeightRequest="198"/>
<Image Source ="label_music.png" HorizontalOptions="Start"/>
<local:HorizontalListViewMusic x:Name="musicListView" Items="{Binding Music}" HeightRequest="198"/>
<Image Source ="label_movies.png" HorizontalOptions="Start"/>
<local:HorizontalListViewMovies x:Name="movieListView" Items="{Binding Movies}" HeightRequest="198"/>
<Image Source ="label_celebrities.png" HorizontalOptions="Start"/>
<local:HorizontalListViewCelebrities x:Name="celebritiesListView" Items="{Binding Celebrities}" HeightRequest="198"/>
<Image Source ="label_style.png" HorizontalOptions="Start"/>
<local:HorizontalListViewStyle x:Name="styleListView" Items="{Binding Celebrities}" HeightRequest="198"/>
</StackLayout>
</ScrollView>
I found a solution here. However it doesn't work in my case because I don't have inner scroll views. Please help. Thank you!
I found the solution. I just had to add the following code to the CustomRenderer of the horizontallistviews in android.
public override bool DispatchTouchEvent(MotionEvent e)
{
switch (e.Action)
{
case MotionEventActions.Down:
StartX = e.RawX;
StartY = e.RawY;
this.Parent.RequestDisallowInterceptTouchEvent(true);
break;
case MotionEventActions.Move:
if (IsHorizontal * Math.Abs(StartX - e.RawX) < IsHorizontal * Math.Abs(StartY - e.RawY))
this.Parent.RequestDisallowInterceptTouchEvent(false);
break;
case MotionEventActions.Up:
this.Parent.RequestDisallowInterceptTouchEvent(false);
break;
}
return base.DispatchTouchEvent(e);
}
Referred this
have you tried using both ScrollViewand HorizontalScrollView ? http://android-code-crumbs.blogspot.ro/2011/06/how-to-set-horizontal-and-vertical.html
Related
I have different elements, controls and views wrapped in frames in order to apply corner radius, which is working fine on Android. But on the iOS side, even though the frame is round cornered, its contents does not clip to its radius but stays square as if nothing is applied.
Sample:-
<Frame BackgroundColor="{DynamicResource Theme}" CornerRadius="15" Padding="0">
<Image Source="{Binding PImage}" HeightRequest="132.5" Aspect="AspectFill"/>
</Frame>
Expected (Which happens in Android):-
Actual:-
How to make the frame contents respect the corner radius like what happens in Android ?
Clip the content of the frame to its boundaries:
<StackLayout Padding="30">
<Frame CornerRadius="30" Padding="0" IsClippedToBounds="True">
<Image Source="https://aka.ms/campus.jpg" />
</Frame>
</StackLayout>
https://stackoverflow.com/a/55611485/1039935
From shared code works in my local site :
The sample solution : Have a check with the version of Visual Studio and Xamarin Forms .Be sure that have updated to the latest version (Visual Studio: 16.6.5, Xamarin Forms : 4.7.0.1239).
Otherwise , you can create a Custom Frame Renderer in iOS to set CornerRadius .
Create a CustomFrame :
public class CustomFrame: Frame
{
}
Create a Custom renderer in iOS:
public class CustomFrameRenderer : FrameRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
Layer.CornerRadius = Element.CornerRadius;
//Layer.CornerRadius = 15;
Layer.MasksToBounds = true;
}
}
In Xaml use the custom Renderer :
<local:CustomFrame BackgroundColor="CadetBlue"
Padding="0">
<Image Source="XamarinLogo.png"
HeightRequest="132.5"
Aspect="AspectFill" />
</local:CustomFrame>
I have a StackLayout and a number of elements inside (buttons, texts etc).
I want the ActivityIndicator to overlay the entire screen and make it not able to do anything to those elements.
I have put ActivityIndicator inside the StackLayout but wrapped it with AbsoluteLayout thinking that AbsoluteLayout can easitly overlap everything:
<StackLayout>
<AbsoluteLayout>
<ActivityIndicator ... />
</AbsoluteLayout>
<...other elements...>
</StackLayout>
Instead activity indicator is displayed at the top of the StackLayout and other elements are available for affecting. I'm new in Xamarin and layouts, what am I doing wrong? All samples in the Internet have single ActivityIndicator per page...
It is better said that an AbsoluteLayout's children can easily overlap each other. Just as a StackLayout lets you stack controls inside , vertically or horizontally, an AbsoluteLayout lets you position controls inside using absolute or proportional values, thus if two controls have the same absolute positioning set, they will overlap 100%.
Therefore, you want to wrap your StackLayout and another StackLayout that has your ActivityIndicator inside an AbsoluteLayout using proportional sizing, e.g:
<AbsoluteLayout>
<StackLayout
x:Name="mainLayout"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All" >
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
<Button Text="Do Something"
Clicked="DoSomethingBtn_Clicked" />
</StackLayout>
<StackLayout
x:Name="aiLayout"
IsVisible="False"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Gray" Opacity="0.5">
<ActivityIndicator
x:Name="ai"
IsRunning="False"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Color="Black"/>
</StackLayout>
</AbsoluteLayout>
The above sets the two StackLayouts to both take up the full size of the parent container of the AbsoluteLayout, which is presumably a Page. The StackLayout that has the indicator is initially hidden. IN the page code behind for the above example, I show the second StackLayout and start the activity indicator and show it for 2 seconds, and then hide it again:
private async void DoSomethingBtn_Clicked(object sender, EventArgs e)
{
ai.IsRunning = true;
aiLayout.IsVisible = true;
await Task.Delay(2000);
aiLayout.IsVisible = false;
ai.IsRunning = false;
}
Here is what it looks like:
And since the second StackLayout completely covers the first, none of the controls in the first StackLayout are clickable.
Might be worth going over the docs for the AbsoluteLayout to understand the AbsoluteLayout.LayoutBounds and AbsoluteLayout.LayoutFlags:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout
If you want to "overlap", you need to be outside of the StackLayout. A Grid is the most common control for this:
<Grid>
<StackLayout>
<...other elements...>
</StackLayout>
<ActivityIndicator ... />
</Grid>
Here's a hacked-up control for making things full-screen via the horribly-named RelativeLayout (tested in Android only)
[ContentProperty("ContentInner")]
public class FullScreenLayout : ContentView
{
public View ContentInner
{
get => ((RelativeLayout) Content).Children[0];
set
{
var display = DeviceDisplay.MainDisplayInfo;
var screenWidth = display.Width / display.Density;
var screenHeight = display.Height / display.Density;
var wrapper = new RelativeLayout();
wrapper.Children.Add(value, () => new Rectangle(0, 0, screenWidth, screenHeight));
Content = wrapper;
}
}
}
It can be used like this:
<controls:FullScreenLayout>
<!-- Anything you want fullscreen here -->
</controls:FullScreenLayout>
Unfortunately, if you use NavigationPage, this won't overlap the navigation bar. Every other solution currently on this page has the same issue. According to this question, it's not possible to solve this without using platform-specific customer renderers. Ugh.
If you don't mind the page being dimmed, you can use Rg.Plugins.Popup which implements the custom renderers needed.
I ended up solving my similar problem (dimming most of the screen) by implementing a custom renderer for the navigation page itself.
In our application we have some controls that are Entry controls that take in numbers, so we want the user to be able to type into them. Other controls are popup selections such as a Date, or a Picker control, of which we code as Label controls.
To give the user the same consistency as Entry controls, for iOS we put the same frames around them as an Entry control in iOS such as this:
Standard Entry Control Xaml:
<Entry Grid.Row="0" Grid.Column="1" Keyboard="Numeric" ReturnType="Done" WidthRequest="60"
Text="{Binding SocketItem.QuantityPerSys, Converter={StaticResource IntComma}}"
TextChanged="OnIntegerEntryChanging" Placeholder="0"
AutomationId="SocketQtySysValueEntry" />
Mimic'ed Entry Control for iOS Rendering:
<Frame Grid.Row="1" Grid.Column="1" AutomationId="SocketDecisionDateEntryFrame">
<Label Text="{Binding SocketItem.DecisionDate, StringFormat='{0:M/d/yy}', Converter={StaticResource LocalTime}}"
HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" AutomationId="SocketDecisionDateValueEntry"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnSocketDateTapped" CommandParameter="DecisionDate" />
</Frame.GestureRecognizers>
</Frame>
However in Android the Entry controls have a line underneath them:
Android Entry Control
We want to render these label controls the same as the Entry controls so they are consistent:
Label and Entry controls
My assumption is that I have to use a custom renderer of which I already have setup, but with just a normal underline of the text (which is of course what I don't want):
class UnderlinedLabelRenderer : LabelRenderer
{
public UnderlinedLabelRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
if (Control != null && Control is FormsTextView textView)
{
textView.PaintFlags |= PaintFlags.UnderlineText;
}
}
}
I've tried investigating the actual Xamarin.Forms renderer code for the Entry control, but I'm not familiar enough with it or know exactly which class to look at to figure it out (I'll continue that route in the mean time). I am assuming I'll have to somehow add a new box control to the label cell or something.
I've also looked at this question: Xamarin Forms Android EntryCell Underline which is related but the opposite of what I want to do.
I also tried making the controls disabled Entry controls:
<StackLayout Grid.Row="1" Grid.Column="1" HorizontalOptions="End" AutomationId="OppApplicationValueFrame">
<controls:ReadonlyEntry Text="{Binding Opportunity.Application}" IsEnabled="False"
AutomationId="OppApplicationValueEntry"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="OnApplicationTapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
but that yielded light gray text (due to the disabled). I then created a custom renderer to fix the text:
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null && Control is FormsEditText editText)
{
editText.SetTextColor(Android.Graphics.Color.Gray);
//editText.SetBackgroundColor(Android.Graphics.Color.Gray);
}
}
but the underline on the control is still light grey (disabled color). I referenced this question on how to remove the underline: Xamarin Forms Android EntryCell Underline. But doing the opposite of setting it to another color makes the entire cell Gray.
How do I change the color of the underline in the CustomRenderer?
Any help would be great or a place to start looking.
I think the easiest way to achieve your requirement is to use a Entry instead of a Label, disable the edit ability of the entry and add a TapGestureRecognizers there to handle event:
<StackLayout>
<Entry IsEnabled="False" Text="test" HorizontalTextAlignment="Center" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
</StackLayout.GestureRecognizers>
</StackLayout>
And I don't think you can achieve this by using a custom renderer of Lable, native TextView does not has this feature.
Another way is to create a custom control, like a view contains a label and a view(height =1) with black background color which stay under the label.
Update:
Code in the custom renderer to change the color of underline:
[assembly: ExportRenderer(typeof(myEntry), typeof(MyEntryRenderer))]
namespace App557.Android
{
class MyEntryRenderer : EntryRenderer
{
public MyEntryRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
EditText editText = Control as EditText;
editText.Enabled = false;
editText.SetTextColor(global::Android.Graphics.Color.LightGreen);
editText.Background.SetColorFilter(global::Android.Graphics.Color.LightGreen, PorterDuff.Mode.SrcIn);
editText.SetSingleLine(true);
editText.Ellipsize = TruncateAt.End;
}
}
}
}
I'm trying to find a method of displaying a text block or that will allow me to arbitrarily drag and drop drop that control around the screen.
I've scoured google and here, but every drag and drop related question I find is around exchanging data, not just position.
Is anyone aware of something ready to go, or can you point me in the direction I should be looking?
You can do this by using behaviors:
<TextBlock Text="Hello!">
<i:Interaction.Behaviors>
<el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
</i:Interaction.Behaviors>
</TextBlock>
You need to add a reference to Microsoft.Expression.Interactions in your solution, and the following namespace at the top of your XAML file:
xmlns:el="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
The xaml:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="30" Margin="125,132,0,0"
Name="textBlock1" Text="TextBlock"
Width="83" MouseMove="textBlock1_MouseMove" />
</Grid>
and the code behind:
private void textBlock1_MouseMove(object sender, MouseEventArgs e)
{
TextBlock realSender = (TextBlock)sender;
var theParent = (Grid)realSender.Parent;
var position = e.GetPosition(theParent);
realSender.Margin = new Thickness(
position.X - realSender.Width / 2,
position.Y - realSender.Height / 2, 0, 0);
}
The toolkit sample used to include an example of doing this.
Not sure if it's still in there though as it was based on the gesture support which has since been deprecated. If it's gone check the August 2011 version.
I want to use a WriteableBitmap to render a programmatically instantiated UserControl to a jpg/png image to use it as a live tile background image in a Windows Phone 7.1 project, but DataBinding is not working as expected when rendering the control.
In general, the UserControl is something like this:
<UserControl>
<Grid x:Name="LayoutRoot" Height="173" Width="173" >
<Grid.Background >
<SolidColorBrush Color="{StaticResource PhoneAccentColor}" />
</Grid.Background >
<Grid.RowDefinitions>
<RowDefinition Height="27"/>
<RowDefinition Height="146"/>
</Grid.RowDefinitions >
<ItemsControl Grid.Row="1" Margin="10,0,0,0" ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding MyBindingProperty, FallbackValue=xxx}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Text="Hello World" FontSize="22" Margin="5,0,0,0"/>
<TextBlock TextWrapping="Wrap" Text="{Binding Count, FallbackValue=-1}" FontSize="18.667" Margin="123,0,0,0"/>
</Grid>
</UserControl>
When I now put this control onto a PhoneApplicationPage and assign a list with items of my data structure to the DataContext property of the UserControl, everything works fine and I see one TextBlock for each list item and the Text property of that TextBlock is correctly displaying the value of the property of my data structure. Also the last TextBlock on the Grid displays correctly the current count of list items.
BUT when I'm now trying to programmatically create that UserControl, assign the same list to the DataContext and then use a WriteableBitmap to render it to an image file, it seems that all DataBindings within the DataTemplate of the ItemsControl aren't working anymore, they're displaying the FallbackValue now. Although the DataBinding of the outer TextBlock in the Grid is still working perfectly and also I got the correct number of TextBlocks in the StackPanel (= items in the bound list).
Here is my code for creating the the WriteableBitmap:
var tile = new MyTileControl { DataContext = this._myList };
tile.Arrange(new Rect(0, 0, 173, 173));
tile.Measure(new Size(173, 173));
var bmp = new WriteableBitmap(173, 173);
bmp.Render(tile, null);
bmp.Invalidate();
What's the problem with the DataBindings in the DataTemplate when rendering through a WriteableBitmap and how can I solve it?
I think, that your control not fully created yet, and you can't grab bitmap just after creation. Try to use Dispatcher.BeginInvoke or something else for delayed grabbing of image.
Also, add this control to your page and look where is a problem - in control creation or in bitmap? This give you more information about a problem.