I want to add draggable icon in mobile app which i can move anywhere on screen.
I tried with floating action but no luck.
<views:FloatingActionButton HorizontalOptions="End" VerticalOptions="End"
ImageSource="CallHistory.png"
x:Name="floCallHistory"
ButtonColor="Transparent"
Clicked="floCallHistory_Clicked" BackgroundColor="Transparent" FlowDirection="LeftToRight"
>
</views:FloatingActionButton>
Related
is it possible to round the corners of the XCT popup?
I tried to set the BackgroundColor to transparent, and to set the body in a frame with the option CornerRadius - but this does not work as desired.
Does anyone have a tip on how to round the corners?
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CashTracker.Views.ImagePopup"
xmlns:viewmodels="clr-namespace:CashTracker.ViewModels"
xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
Size="300,400"
BackgroundColor="Transparent">
<Frame CornerRadius="20" HasShadow="True">
<StackLayout>
<Label Text="Aufgenommenes Foto" FontSize="Medium" HorizontalOptions="Center"/>
<Image x:Name="PopupImageSource"/>
</StackLayout>
</Frame>
</xct:Popup>
Xamarin XCT Popup
The popup should look like this - only without the white corners.
Xamarin Popup Frame
Somehow BackgroundColor was not working for Popup. Hence use the Color propperty for setting color of the Popup.
If you are using Frame in your layout, you can use Frame's CornerRadius for rounded corners (only if you are using Frame).
If you are not using Frame then you can use Xamarin Community Toolkit's CornerRadiusEffect.CornerRadius to set CornerRadius for any Layout, View or Control.
Hence for your question, it can be done by setting Popup's color as Transparent and your content's parent element must have property for corner radius and must have BackgroundColor set to White or any other Color as your Popup`s color is Transparent.
Here's the XAML
<xct:Popup ...
xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
Size="300,400"
Color="Transparent">
<Frame CornerRadius="20" HasShadow="True">
<StackLayout>
<Label Text="Aufgenommenes Foto" FontSize="Medium" HorizontalOptions="Center"/>
</StackLayout>
</Frame>
//OR, if you don't need Frame then,
<StackLayout BackgroundColor="White" xct:CornerRadiusEffect.CornerRadius="10">
<Label Text="Aufgenommenes Foto" FontSize="Medium" HorizontalOptions="Center"/>
</StackLayout>
</xct:Popup>
There are lot of bugs in Xamarin Community Toolkit controls and views, we need to have some work-around for every control. Be it XCT's Popup, TabView, or extensions such as CornerRadius, ShadowEffect, TouchEffects, NativeAnimations, etc. The Community can't provide a single control without any bugs. But still, there are lots of useful features in XCT, hence we can only hope that the bugs are fixed, although the focus of fixing bugs if moved on to MAUI's Community Toolkit, until then we can use some work-arounds till stable and useful version of MAUI is released (considering its current status while writing this answer).
I'm using "Sharpnado Tabs" and having problem in firing tap event in middle "BottomTabItems".
I have 5 bottom tabs as you can see the attached photo and the areas outlined with black is firing tap event and changing the views accordingly. However, the areas marked with white, is not doing anything.
EDIT
The 5 tabs are spread evenly across the bottom panel. I have set the middle tabs' background to red to see the area they cover and where the touch is working. Setting InputTransparent="true" removes the touch event from the whole area of the tab.
<sho:ViewSwitcher x:Name="Switcher"
Grid.Row="0"
Grid.RowSpan="3"
Animate="False"
SelectedIndex="{Binding SelectedViewModelIndex}">
<sho:LazyView x:TypeArguments="pages:ProfilePage" BindingContext="{Binding ProfilePageViewModel}" />
</sho:ViewSwitcher>
<Image Source="navigationbackground.png" Grid.Row="3" TranslationY="5" />
<sho:TabHostView x:Name="TabHostLogo"
Grid.Row="3"
WidthRequest="200"
HeightRequest="60"
Margin="0"
Padding="0,20,0,0"
HorizontalOptions="Fill"
VerticalOptions="Start"
BackgroundColor="Transparent"
IsSegmented="False"
Orientation="Horizontal"
TabType="Fixed"
SelectedTabIndexChanged="TabHostLogo_SelectedTabIndexChanged"
SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
<sho:TabHostView.Tabs>
<sho:BottomTabItem IconImageSource="homeiconselected.png" IconSize="20" />
<sho:BottomTabItem IconImageSource="profileicon.png" IconSize="20"/>
<sho:TabButton x:Name="TabButton"
IsVisible="True"
ButtonBackgroundColor="Transparent"
ButtonCircleSize="40"
CornerRadius="40"
IconImageSource="navigationaddbutton.png"
TapCommand="{Binding ProfileViewCommand}"
Scale="2.5"
Margin="0,0,0,15"
TranslationY="-20" />
<sho:BottomTabItem IconImageSource="chaticon.png" IconSize="20"/>
<sho:BottomTabItem IconImageSource="moreicon.png" IconSize="20"/>
</sho:TabHostView.Tabs>
</sho:TabHostView>
The problem is caused by Scale attribute. Unfortunately, that scales the entire tab area, not just the circle button. At Scale=2, half of each of the surrounding buttons are blocked by an invisible expanded tab rectangle (that surrounds the middle tab button).
As you discovered, at Scale=2.5, more than half of the surrounding tabs are invisibly blocked.
I did not find any way to work around this bug. (Other than not using Scale - but then the button is either too small or not a circle, depending on values you use for ButtonCircleSize and CornerRadius.)
I recommend raising this as an issue at github Sharpnado.Tabs issue.
If you do, include a link in that issue to this SO Q&A. And add a link to bottom of your question to that issue - so people can track progress.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackStuff.MainPage">
<StackLayout Orientation="Vertical">
<Image Source="image.jpg" VerticalOptions="Fill" HorizontalOptions="Fill"/>
</StackLayout>
</ContentPage>
I have a Xamarin.Forms project where I want an image to resize inside a StackLayout. I stripped it down to the minimal code above and if I resize the window, the image will only resize based off the window width. i.e. the image gets clipped off the bottom of the window if I change the height.
If I change the StackLayout's Orientation to Horizontal, I get the opposite - it'll resize based off a changing height, but not width.
If I completely remove the StackLayout and have only the image on the page, then the entire image will always be visible which is the behaviour I expected when it's inside the StackLayout.
Can anyone explain why this is? If I replace the Image with a BoxView, it'll happily resize and stay within the bounds of the StackLayout.
Thanks.
I solved this by wrapping the image in a grid:
<StackLayouenter code heret Orientation="Vertical">
<Grid>
<Image Source="image.jpg" VerticalOptions="Fill" HorizontalOptions="Fill"/>
</Grid>
</StackLayout>
I have no idea why it works but I guess that's Xamarin.Forms for you.
I understand how to create a ToolbarItem and set it's Order equal to Secondary which will give me an overflow menu like so:
But I'm not sure how I could implement such a menu in other parts of my application. For instance in the app I'm currently working on, I've removed the toolbar and created my own meaning there is no way to set the ToolbarItems property. I can add a ImageButton for the 3 dots overflow menu icon but I cannot get it to display a menu like the out of the box implementation does.
I'd also like to use this in other parts of my app (not just on the toolbar) such as on some sort of CardView.
Has anyone dealt with this problem before?
You can use Absolute layout to achieve this:
<AbsoluteLayout>
<StackLayout RowSpacing="0" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<!--Main Content of the screen-->
</StackLayout>
<BoxView Color="Gray" AbsoluteLayout.LayoutBounds="1,0,250,250" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
In the above code I have used a BoxView of Gray background for that menu toolbar to just show a demo, you can implement your view and set the width and height accordingly and make that view visible on click of icon which you will add on the toolbar.
Output:
This can be easily achieved using AbsoluteLayout in Xamarin.Forms
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout
https://xamgirl.com/absolutelayout-in-xamarin-made-simple/
I have added an icon to the toolbar by the following code, but how can I align it to center. Now it is on the right end. In this thread telling it is not possible in xamarin forms.
<ContentPage.ToolbarItems>
<ToolbarItem Icon="logo-final.jpg"/>
</ContentPage.ToolbarItems>
I need the icon on the center like below screen.
Please suggest a solution for this feature?
You should try Navigation Title view
<ContentPage>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Image Source="iconXamagon.png">
</Image>
</StackLayout>
</NavigationPage.TitleView>
...
</ContentPage>
For more referance https://montemagno.com/xamarin-forms-icons-in-navigation-toolbar/