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).
Related
I am building this view currently:
This is a snapshot of the ios render, the code simply is:
<StackLayout>
<Image Source="img_logo"/>
</StackLayout>
But Android is not quite the same:
I tried everything, giving it verticaloptions, horizontaloptions, changing the aspect to everything, the image is never displayed as it is in ios. It is either clipped, or loses its original aspect ratio. I dont know what else to try here and why I have to do anything in the first place. Please tell me the atributes I need to use...
This code is expected to be rendered differently in some cases.
It is very important what is the target screen density of the image in your platform project. If it is different then obviously it will be rendered at a different size with the code above.
If you want to achieve the same look set the Width or Height property or both. Assuming that the container allows those values (that it is big enough) it will look exactly the same then.
If you want to adjust adjust the size of the image according to the space ratio of different views on the page, you can use Grid to achieve this.
You can set the width to Star or a special value.
For more about this, you can check rows-and-columns.
You can refer to the following code:
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<!-- Logo -->
<Image Grid.Row="0"
Source="test.png"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
/>
<!-- Sign In Button -->
<StackLayout Grid.Row="1" Padding="10,0,10,0" VerticalOptions="Center">
<Button VerticalOptions="Center" Text="Sign In " />
</StackLayout>
</Grid>
</ContentPage.Content>
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.
I'm using trial version of syncfusion for testing.
I'm tring to use comboBox in an stackLayout but it won't show. as long as it fill the whole line it works but when i try to use it in an stacklayout it stop showing.
what should i do to use comboBox within an horizontal stacklayout?
this is my xaml code
<StackLayout Orientation="Horizontal">
<Button Text="T"/>
<comboBox:SfComboBox />
</StackLayout>
You need to specify a height request, so it will "reserve space" for displaying the ComboBox.
Check this example, you can change the value of HeightRequest according to your needs.
<combobox:SfComboBox HeightRequest="40" x:Name="comboBox"/>
I am trying to resize an ActivityIndicator (in Xamarin.Forms), but the Scale property does not work and the HeightRequest just crops the ActivityIndicator.
<StackLayout>
<ActivityIndicator HorizontalOptions="Center" VerticalOptions="StartAndExpand" HeightRequest="20" IsRunning="True" />
</StackLayout>
This is the result.
Any suggestions on what I might be doing wrong?
It seems sizing itself is not supported on the ActivityIndicator. In this case, scaling is your friend.
The cutting-off you see happening is because the ActivityIndicator is inside a StackLayout. Because of how a StackLayout works, it will only take up the space it needs. Since scaling doesn't necessarily make your ActivityIndicator bigger, you have two options:
Replace your StackLayout with a Grid
Give your ActivityIndicator a WidthRequest and HeightRequest that is big enough to keep your scaled ActivityIndicator
Note: Talking about iOS here. Width and height seem to work on Android
Remove HeightRequest="20", it blocks your scale property.
Code should look like this
<ActivityIndicator HorizontalOptions="Center" VerticalOptions="StartAndExpand" Scale="2" IsRunning="True" />
Now, you can scale to whatever size you want.
How to justify the Binding Text ?
My code is shown below but it didn't help me
<StackLayout HorizontalOptions="Fill" Padding="20,20,20,20" Spacing="2">
<Label Text="{Binding MainText}" HorizontalOptions="Fill"
VerticalOptions="Center" XAlign="Start" LineBreakMode="WordWrap"
x:Name="aboutUs" TextColor="Black"/>
</StackLayout>
Short answer: Xamarin.Forms doesn't gives you a way to do it directly.
Longer answer:
The only valid values for HorizontalTextAlignment (which you should use instead of the deprecated XAlign) are Start, Center and End and doesn't provide any way to justify the text. So you can't justify a label.
If you really want to have justified text, you could:
implement your own LabelRenderer that supports it;
or, simpler, as it's an About Us box, use a WebView and rely on the HTML engine to justify the text for you.