im using circleImage
xmlns:ic="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
in my xaml file.
and what i'm trying to do is inserting
<ic:CircleImage
x:Name="userProfileImage"
HeightRequest="50"
WidthRequest="50"
Aspect="AspectFill"
Source="{Binding post.uploader.userProfile.userThumbnail}"
/>
this image under the button property.
but if i do this(under)
<Button Clicked="OnUserInfoClicked">
<Button.Image>
<ic:CircleImage
x:Name="userProfileImage"
HeightRequest="50"
WidthRequest="50"
Aspect="AspectFill"
Source="{Binding post.uploader.userProfile.userThumbnail}"
/>
</Button.Image>
</Button>
then, i get this error.
No property, bindable property, or event found for 'image'
what am i doing wrong? and how to fix it?
What you are trying to do is not possible. However if all you wanna do is be able to click on the image and perform an action, why don't you just use a TapGesture?
<ic:CircleImage
VerticalOptions="Center"
x:Name="userProfileImage"
HeightRequest="50"
WidthRequest="50"
Aspect="AspectFill"
Source="{Binding post.uploader.userProfile.userThumbnail}">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnUserInfoClicked" />
</Image.GestureRecognizers>
</ic:CircleImage>
Hope this helps!
To those stumbling on this in the future - If you are not required to use the CircleImage object, Xamarin's default buttons have circular support by making the CornerRadius half the height of the image.
<ImageButton
x:Name="userProfileImage"
HeightRequest="50"
WidthRequest="50"
Aspect="AspectFill"
CornerRadius="25"
BackgroundColor="White"
Source="{Binding post.uploader.userProfile.userThumbnail}"
/>
You can also add a BorderColor and BorderRadius to make it pop out a bit more if you need:
Related
I am trying to create a simple ListView with custom ItemTemplate which consists of a Grid with some information. Each item in the ListView should have a larger space than that of the default. I've tried messing around with Margins/Padding but can't seem to create a larger space between items.
Does anyone have any tips how to achieve a greater whitespace between items in a ListView? From what I've found online and in documentation seems to be lacking. But there must be something I'm missing since this should be a pretty obvious use case of a ListView.
Code in the xaml page which the user sees:
<ListView ItemsSource="{Binding List, Mode=TwoWay}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
HasUnevenRows="True"
WidthRequest="455"
SeparatorVisibility="Default"
SeparatorColor="Transparent"
BackgroundColor="WhiteSmoke"
IsGroupingEnabled="True"
>
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<controls:CustomItemTextTable NameText="Name Name"
IdentityText="NUMBER IDENTITY"
IssuerText="TEST"
IssuerOrganisationText="TEST ORG"
CreatedText="2022-10-10 20:24"
ExpireText="2042-04-06 22:58"
StatusText="Inactive"
TrustLevelText="3"
IsClippedToBounds="False"
/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Code in the CustomItemTextTable
<Border StrokeThickness="0"
StrokeShape="RoundRectangle 10"
BackgroundColor="WhiteSmoke"
VerticalOptions="FillAndExpand"
HorizontalOptions="Fill"
Padding="11"
>
<Grid ColumnDefinitions="155,10,171"
RowDefinitions="*,*,*,*,*,*,*,*"
Padding="0,0,0,0"
>
<Label Text="Name"
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Identity"
Grid.Row="1"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Issuer"
Grid.Row="2"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Issuer org"
Grid.Row="3"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Created"
Grid.Row="4"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Expire"
Grid.Row="5"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Status"
Grid.Row="6"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="TrustLevel"
Grid.Row="7"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Grid.Row="0"
Grid.Column="2"
x:Name="name"
/>
<Label Grid.Row="1"
Grid.Column="2"
x:Name="identity"
/>
<Label Grid.Row="2"
Grid.Column="2"
x:Name="issuer"
/>
<Label Grid.Row="3"
Grid.Column="2"
x:Name="issuerOrg"
/>
<Label Grid.Row="4"
Grid.Column="2"
x:Name="created"
/>
<Label Grid.Row="5"
Grid.Column="21"
x:Name="expire"
/>
<Label Grid.Row="6"
Grid.Column="2"
x:Name="status"
/>
<Label Grid.Row="7"
Grid.Column="2"
x:Name="trustLevel"
/>
</Grid>
Any help/tips would be greatly appreciated...
I tried increasing Padding/Margin in both Xaml-pages.
IMPORTANT: You don't show the first few lines of CustomItemTextTable's xaml -
The header element that defines x:Class. Remove any BackgroundColor there, or change it to something obvious like "HotPink", to see if it is filling an area you are trying to make "show through".
That XAML doesn't give LayoutManager enough information to do what you want:
You've told Grid to make all rows same height (*), but nowhere is a total height stated.
Then you ask for a Margin, but that gets taken from the default total height assigned to the item.
The safest solution is to explicitly Request a Height. Make it large enough to include the desired Margin:
<CustomItemTextTable HeightRequest="210" Margin="0,0,0,10" ... />
NOTE: An alternative location for HeightRequest and/or Margin is in the custom view's header:
<SomeUIClass
xmlns:...
x:Class="...CustomItemTextTable"
HeightRequest="210" <-- these can be above x:Class property if you prefer.
Margin="0,0,0,10"
/>
If that doesn't fix it, remove that Margin. Instead, add a TRANSPARENT area within the item. Thus allowing color behind to show through. There are various ways to do this. Here is one:
<StackLayout
<Border ... <-- your existing code
</Border>
<BoxView HeightRequest="10" />
</StackLayout>
I am trying to make my Stacklayout's background rounded (only right and left bottom sides). I looked for how to search but couldn't make sure. How can I do it?
You can use Xamarin.Forms.PancakeView package:
1- Install it in your shared as in your platform projects (latest version require Xamarin.Forms 4.8.0.1451 and upper).
2- Include the namespace for that package in your xaml:
xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
3- Create a PancakeView which will host your controls inside:
<pancake:PancakeView Padding="10"
BackgroundColor="Blue"
CornerRadius="0,0,40,40">
<StackLayout Padding="0"
HorizontalOptions="FillAndExpand">
<Label Text="hello World"
FontSize="Medium"
TextColor="White"
HorizontalOptions="Center"/>
<Button Text="More Details"/>
</StackLayout>
</pancake:PancakeView>
you can play on it shape with the CornerRadius propety.
Edit:
Just wanted to show the usage of Gradients as the question screenshots includes one.
For more details on this package you can consult their Wiki page.
<StackLayout>
<pancake:PancakeView Padding="10"
BackgroundGradientStartPoint="1,0"
BackgroundGradientEndPoint="1,1"
HeightRequest="300"
VerticalOptions="Start"
CornerRadius="0,0,40,40">
<pancake:PancakeView.BackgroundGradientStops>
<pancake:GradientStopCollection>
<pancake:GradientStop Color="#44F3FF"
Offset="0"/>
<pancake:GradientStop Color="#46ACDC"
Offset="0.4"/>
<pancake:GradientStop Color="#0057CB"
Offset="1"/>
</pancake:GradientStopCollection>
</pancake:PancakeView.BackgroundGradientStops>
<StackLayout VerticalOptions="FillAndExpand">
<Label Text="Hello World"
HorizontalOptions="Center"
FontSize="Large"
TextColor="Black"/>
<Button Text="More Details"
BackgroundColor="#0057CB"
BorderWidth="2"
BorderColor="#44F3FF"
VerticalOptions="CenterAndExpand"
CornerRadius="25"/>
</StackLayout>
</pancake:PancakeView>
<Label Text="What are you doing today?"
FontSize="Title"
Margin="30,0,0,0"
TextColor="Black"/>
</StackLayout>
If I want to move a button up the screen the same distance as the height of another control on the page I can do this:
this.myControl.TranslateTo(20, - this.myOtherControl.Height);
Is there a way to do this in XAML?
Is your situation like the screenshot below?
Do you want to achieve it like this screenshot?
You could used TranslationY="{ Binding Path=TranslationY ,Source={x:Reference btn1}}" to achieve that.
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<StackLayout Orientation="Horizontal" HeightRequest="100" Padding="20,0,0,0">
<Button x:Name="btn1" Text="Aqua" HeightRequest="60" WidthRequest="50" TranslationY="23" />
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="100" Padding="20,0,0,0">
<Button HeightRequest="60" WidthRequest="50" Text="llll" TranslationY="{ Binding Path=TranslationY ,Source={x:Reference btn1}}"/>
</StackLayout>
</StackLayout>
1.Code from another xaml page.
<Frame x:Name="coc1Lock" Grid.Row="0" Grid.Column="1" Padding="2" BackgroundColor="Gray" Opacity="0.95"> <!--COC1 Lock-->
<Image Source="lock0" HorizontalOptions="CenterAndExpand" Aspect="AspectFit"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Lock_Tap"/>
</Frame.GestureRecognizers>
</Frame>
In the constructor of the page which element has to be called assign this element to some global variable, after the InitializeComponent(); line, ex:
Globals.Instance.CocLock = coc1Lock;
then everywhere in the app you have access to it via Globals.Instance.CocLock.
I'm having an issue (particularly on iOS devices such as iPhone 6s, 7, Ipad Pro etc) where my entry field under border are not expanding horizontally to the end of the page.
Full Code
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image Source="Logo.png" VerticalOptions="EndAndExpand"/>
<Label Text="Welcome" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="Large" />
<Label Text="I don't have an account - Register" freshEssentials:TappedGestureAttached.Command="{Binding GoToRegisterPageCommand}" TextColor="Accent" FontSize="Medium" HorizontalOptions="Center"/>
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
<Entry x:Name="EmailEntry" Text="{Binding Email}" Placeholder="Email" Keyboard="Email">
<Entry.Behaviors>
<behaviours:EmailValidatorBehaviour IsValid="{Binding IsEmailValid, Mode=OneWayToSource}"/>
</Entry.Behaviors>
</Entry>
<Entry x:Name="PasswordEntry" Text="{Binding Password}" Placeholder="Password" IsPassword="True" />
<Label Text="{Binding InstructionText}" HorizontalTextAlignment="Center" FontSize="Large" />
</StackLayout>
<Button Text="Login" Command="{Binding LoginCommand}" VerticalOptions="End"/>
</StackLayout>
The same code displays fine on iPhone 5-5s and all Android devices.
Any ideas? i've tried fiddling with 'fillandexpand' etc on the entrys but nothing seems to be working.
My Xamarin version is 2.3.1.114 (i tried upgrading but was left with an unbuildable project with XAMC errors. can try again if that's what people suggest)
Possibly an issue in the iOS entry renderer?
I've noticed my other entry views also have the same error.
Not extending borders
More broken borders
I ended up finding the problem!
Someone in the project had created a custom renderer for all entrys that I was not aware of, and calculating the Frame width incorrectly.