In my Xamarin Forms Project I have several SVG Images that should be displayed.
Therefore I use the Xamarin.Forms.FFImageLoading.Svg.Forms NuGet Package.
The XAML looks like this:
<Grid
Margin="0"
ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<local:LetterSpacingLabel
FontSize="14"
TextColor="#1F1F1F"
FontFamily="{StaticResource Bliss2-Regular}"
LetterSpacing="0.1"
VerticalTextAlignment="Center"
Grid.Column="0"
Text="{Binding Name}"/>
<ffimageloadingsvg:SvgCachedImage
Grid.Column="1"
Source="{Binding StateIconPath}"/>
</Grid>
And the Image is displayed as it should.
However I want it to be smaller, so I add LayoutOptions like this:
After that, the Image it not displayed anymore.
Any solutions to this problem?
Thanks in advance.
[EDIT]
Here is a .svg-File that i am using:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
<style type="text/css">
.st0{fill:#CE2D46;}
</style>
<path id="Pfad_73" class="st0" d="M11,0C4.9,0,0,4.9,0,11s4.9,11,11,11c6.1,0,11-4.9,11-11c0,0,0,0,0,0C22,4.9,17.1,0,11,0z
M12.4,18.6c0,0.7-0.6,1.3-1.3,1.3h-0.2c-0.7,0-1.3-0.6-1.3-1.3v-0.2c0-0.7,0.6-1.3,1.3-1.3h0.2c0.7,0,1.3,0.6,1.3,1.3V18.6z
M12.4,14.2c0,0.8-0.7,1.3-1.4,1.3c-0.7,0-1.2-0.6-1.3-1.3V4.9c0-0.8,0.7-1.3,1.4-1.3c0.7,0,1.2,0.6,1.3,1.3V14.2z"/>
</svg>
for your columns width set 9* and 1*
for the image add height and width :
#RobertHaslinger
In this case you can add a padding or margin so the size of your image will be reduced and still responsive
<ffimageloadingsvg:SvgCachedImage Margin ="8" .....>
Related
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:tabs="clr-namespace:Sharpnado.Tabs;assembly=Sharpnado.Tabs"
xmlns:sh="clr-namespace:Sharpnado.Shades;assembly=Sharpnado.Shadows"
x:Class="SplashTest.Segment">
<ContentPage.Content>
<StackLayout>
<tabs:ViewSwitcher x:Name="Switcher"
Grid.Row="1"
SelectedIndex="1"
Grid.Column="1"
Animate="True"
>
</tabs:ViewSwitcher>
<tabs:TabHostView x:Name="TabHost"
Grid.Row="4"
HeightRequest="54"
Margin="20,15,20,0"
VerticalOptions="Center"
Padding="60,0,60,0"
BackgroundColor="#F0F0F3"
Shades="{sh:SingleShade Offset='0,8',
BlurRadius=10,
Color=Gray
}"
CornerRadius="100"
IsSegmented="True"
SegmentedHasSeparator="False"
TabType="Fixed"
SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
<tabs:TabHostView.Tabs >
<tabs:SegmentedTabItem Style="{StaticResource SegmentedTabStyle}" Label="Male" />
<tabs:SegmentedTabItem Style="{StaticResource SegmentedTabStyle}" Label="Female" />
</tabs:TabHostView.Tabs>
</tabs:TabHostView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Above Xaml The Male Tab is corner radius working only left side not in
the Right side how to i give corner radius in both left and right side
in xamrin forms .Note I have install Sharpnado plugin and intilizing
in App.Xaml.
you can use Frame and apply corner radius for all corners by making custom rendererfor the same. Overlap those two frames based on the selection type.
Refer:Customizing Frame corner radius with Xamarin.Forms
Overlap elements in Xamarin.Forms [you can use absolute layout as well, if you want]
Hi I am new to Xamarin Forms and am from native iOS development.
For showing alerts / action sheets I am using this https://github.com/aritchie/userdialogs.
For implementing this I followed this How to use Acr.UserDialogs.
I am getting alert successfully by following this, but now I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons..
Thanks in advance.
I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons.
As the author said, you could do this by creating a style and apply it in AlertConfig.
For example:
In the style.xml:
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- Used for the buttons -->
<item name="colorAccent">#AAAAAA</item>
<!-- Used for the title and text -->
<item name="android:textColorPrimary">#FFFFFF</item>
<!-- Used for the background -->
<item name="android:background">#DDDDDD</item>
<!-- Used for the Alignment -->
<item name="android:gravity">center_horizontal</item>
</style>
And you could find this style Id in the Resource.Designer.cs.
// aapt resource value: 0x7f0b0189
public const int AlertDialogCustom = 2131427721;
Then in the code create a AlertConfig to config the alertdialog:
AlertConfig alertConfig = new AlertConfig();
alertConfig.OkText = "OKOK";
alertConfig.Message = "Message";
alertConfig.Title = "Title";
alertConfig.AndroidStyleId=2131427721;
UserDialogs.Instance.Alert(alertConfig);
With Rg.Plugins.Popup Nuget you can customize the popup.
Finally I am not using any nugget packages. Now I created my own CustomAlert class. I hope it will helpful for any one.
#Miguel Angel please look at below code
In my CustomAlert.xaml file
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="wwww/2009/xaml" x:Class="MY.UserControls.CustomAlert">
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid BackgroundColor="#656565" Opacity="0.5">
</Grid>
<StackLayout BackgroundColor="{StaticResource WhiteColor}" VerticalOptions="Center" Margin="10" Padding="10" >
<Label Text="Title" FontSize="18" HorizontalTextAlignment="Center" Margin="0,0,0,0" TextColor="Black"></Label>
<Label Text="Descrption." FontSize="14"
HorizontalTextAlignment="Start"
Margin="10,10,5,5"
VerticalOptions="Center" TextColor="Gray"></Label>
<Button Text="OK" TextColor="{StaticResource WhiteColor}"
Command="{Binding DismissCustomAlertCommand}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="Red" Margin="30,0,30,0" WidthRequest="400" HeightRequest="40"></Button>
</StackLayout>
</Grid>
</ContentView>
Thank you
Newbie here. Am adding a label on the top of a page using XAML & Xamarin, but the label is too near the top of the page, so it's obscured by the iPad current time.
XAML code being used is:
<?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="XamlSamples.HelloXamlPage"
Title="XAML + Code Page">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="#000000" Spacing="0" Padding="-300,-1,-300,29">
<Label Text="Text here"
Font="Large"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
Style="{DynamicResource TitleStyle}"/>
</StackLayout>
</ContentPage>
Take a look on you Stack Padding (Padding="-300,-1,-300,29") it's a little weird,
Also, you can add some layout with a padding before
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="#000000" Spacing="0" Padding="-300,-1,-300,29">
<Grid Padding="20 "/>
<Label Text="Text here"
Font="Large"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
Style="{DynamicResource TitleStyle}"/>
Change your padding to
Padding="x, 20, y, z"
In iOS, the height of the status bar is 20 pixels and is included when determining the position on the page (meaning a y location of y is at the top of the status bar and similarly the page). Windows and Android do not include the height of the status bar when determining the location on the page (meaning a y location of 0 is at the bottom of the status bar). It should also be noted that in some situations the status bar may actually be 40 pixels tall (in a call from what I've read).
Suggested use for a cross-platform option is to do something like this:
< ContentPage.Padding >
<!-- set platform - specific padding
iOS needs an additional
20px top padding to account for
iPhone status bar -->
< OnPlatform x:TypeArguments ="Thickness"
iOS ="0, 20, 0, 0"
Android ="0, 0, 0, 0"
WinPhone ="0, 0, 0, 0" />
</ ContentPage.Padding >
Note: this padding is being added to your ContentPage tag rather than the StackLayout tag. Code retrieved from here.
I have a UWP app that needs to get SQL data from a webservice hosted on a .Net server in the cloud as well as some extra data from a web API and I want to show an indeterminate Progress Ring control while it's loading.
I have the control bound to a boolean in my MainViewModel that I set to true at the start of the whole update process (done via an awaited async method which works perfectly) and then to false when all data is downloaded but the ring just never becomes visible. I can see PropertyChanged is getting raised but it makes no difference - the progress ring just never displays.
Here's the thing though - the progress ring IS working, but because I can't get it to display in front of my Hub control it just appears not to be working. I know this because if I move the Hub down 100 pixels and set the vertical alignment of the progress ring to Top I can then see the ring and it behaves exactly as expected. But as I obviously don't want to waste 100 pixels I need to get it to display at the front of all content as you'd expect any progress control to do.
I have also tried putting the ring in the grid of the data template's grid for the middle hub section (there are 3 side by side at 640px each) and in the DataTmeplate itself (the second one in Page.Resources below) but it still won't display it so I am tearing my hair out.
I know this has got to be the simplest XAML issue but I've tried everything I can think of and searched the web so I'm hoping someone else can help me get the progess ring to display in front of the Hub?
Here's a cut down version of my XAML page - I can post the lot but it's a big page.
<Page
x:Class="TVTracker.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TVTracker"
xmlns:vm="using:TVTracker.ViewModel"
xmlns:model="using:TVTracker.Model"
xmlns:hlp="using:TVTracker.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
RequestedTheme="Light">
<Page.DataContext>
<vm:MainViewModel/>
</Page.DataContext>
<Page.Resources>
<!-- styles and other resources here -->
<!-- gets displayed in first of 3 hub sections 640 wide -->
<DataTemplate x:Key="ShowListTemplate" x:DataType="model:TVShow">
<Grid Width="640" Height="Auto" Margin="5" HorizontalAlignment="Stretch" RightTapped="ShowsList_RightTapped">
<!-- ...etc etc... -->
<\DataTemplate>
<!-- gets displayed in second of 3 hub sections 640 wide -->
<DataTemplate x:Key="DetailsTemplate" x:DataType="model:TVShow">
<Grid Width="640" Margin="0,20,0,0" Height="Auto" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<!-- ...etc etc... -->
</Grid>
</DataTemplate>
<!-- gets displayed in second of 3 hub sections 640 wide -->
<DataTemplate x:Key="EpisodeListTemplate" x:DataType="model:Episode">
<Grid Width="640" Margin="0,20,0,0" Height="Auto" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<!-- ...etc etc... -->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ProgressRing Name="pgbLoadingShow" IsActive="{Binding LoadingShowData}" Width="100" Height="100" VerticalAlignment="top" Foreground="{StaticResource Medium}"/>
<Hub SectionHeaderClick="Hub_SectionHeaderClick" Margin="0,0,0,0" HorizontalContentAlignment="Stretch" Background="{StaticResource Dark}">
<Hub.Header>
<TextBlock Text="ShowTracker" FontSize="14" Foreground="{StaticResource Bright}"/>
</Hub.Header>
<HubSection Name="hsShows" MinWidth="640" Padding="20" VerticalAlignment="Top" Background="{StaticResource Dark}" >
<!-- ...etc etc.. -->
</HubSection>
<!-- two other hubsections here -->
</Hub>
</Grid>
</Page>
Have you tried putting the ProgressRing after the Hub in your XAML?
<Hub/>
<ProgressRing/>
Generally it will be displayed in the order which you put them in, so the ProgressRing element will be behind the Hub with your code.
I want to create a UserControl having a Canvas inside it. Then I can use it like this in XAML:
<Window ...>
<Grid>
<local:MyCanvasLikeControl>
<Path .../>
<Path .../>
<Polygon.../>
</local:MyCanvasLikeControl>
</Grid>
</Window>
I have tried some things, but always get this error: "Property Content can only be set once". I know of ControlTemplates and such, but could not find my way by reading the docs by myself.
My goal is to have an equivalent to this:
<Window ...>
<Grid ...>
<Border ....>
<Canvas ...>
<Path ...>
<Path ...>
<Polygon ...>
</Canvas>
</Border>
</Grid>
</Window>
But moving the "Border / Canvas" to a UserControl named "MyCanvasLikeControl"
It's the same type of scenario as if you to stuff a bunch of elements of any other type into a control that would produce the same error like for example;
<UserControl>
<Grid/>
<StackPanel/>
<Canvas/>
<!-- you get the idea -->
</UserControl>
It's just telling you that you need to specify a parent capable of holding your content to act as the single content of its parent, which in this case would be your control. So to fix this, it's luckily simple;
<local:MyCanvasLikeControl>
<Grid>
<Path .../>
<Path .../>
<Polygon.../>
</Grid>
</local:MyCanvasLikeControl>
Or switch Grid with Canvas or whatever you want so long as it can host children elements. Hope this helps.
EDIT:
Ok, so I think the definition of requirement may have been a bit over-complicated in its explanation. If I'm understanding you correctly then here's why you're breaking.
You have your first layer of elements that contain your UserControl, but the way you're trying to insert content into it isn't the way that works, you'll need to provide that ability by specifying how you wish to allow it to be added to your control via a ContentPresenter or ContentControl etc. So instead it would be more like this inside your external UserControl;
<Border ....>
<Canvas ...>
<ContentPresenter/> or <ContentControl/> etc.
</Canvas>
</Border>
So then you can inject that stuff in there the way you want.
<Window ...>
<Grid>
<local:MyCanvasLikeControl>
<local:MyCanvasLikeControl.Content>
<Path .../>
<Path .../>
<Polygon.../>
</local:MyCanvasLikeControl.Content>
</local:MyCanvasLikeControl>
</Grid>
</Window>
Make sense?