So I downloaded this start button image:image
I want to make a button with this as the image.I added the image to the project as an embedded resource , and then I did this:
this.StartBtn.ImageSource = ImageSource.FromResource("Fitness_App.Resources.Images.start.png");
while the xaml file looks like this:
<StackLayout>
<Label Text="The workout you have chosen consists of:"/>
<ListView x:Name="Presentation_ListView"/>
<Button x:Name="StartBtn"/>
</StackLayout>
this is the result: image
Any idea how I could make that start png fit nicely?Since it is a png i thought all the other stuff would dissapear.Thanks!
Related
I use zxing.mobile.forms nuget package.
The QR-Code is perfectly displayed on the screen display, but I also need to save this QR-Code in the gallery.
Can I convert it to image for further use? Can I save it right away, since it seems to be an image?
code in xaml:
<zxing:ZXingBarcodeImageView IsVisible="False" x:Name="qrcode"
BarcodeFormat="QR_CODE" WidthRequest="200" HeightRequest="200" BarcodeValue="1">
<zxing:ZXingBarcodeImageView.BarcodeOptions>
<zxingcommon:EncodingOptions Height="200"
Width="200">
</zxingcommon:EncodingOptions>
</zxing:ZXingBarcodeImageView.BarcodeOptions>
</zxing:ZXingBarcodeImageView>
I put crypto.png image into drawable folder under Resources in Android Project.
After I right click on the image -> Build Action -> Embedded Resource.
In MainPage.xaml on the main project I try to load the image like that:
<Image x:Name="HeadImage"
WidthRequest="100"
HeightRequest="100"
MinimumHeightRequest="100"
MinimumWidthRequest="100"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Aspect="AspectFit"
Source="crypto.png"/>
But the image not load.
I try a second method like this in the c# code:
var HeadImage = new Image { Aspect = Aspect.AspectFit };
HeadImage.Source = ImageSource.FromFile("crypto.png");
And this method not worked again..
You need to let your image in drawable folder as Android Resource instead of Embedded Resource, and to use it, you need to:
HeadImage.Source = "crypto.png";
Also, before set the image, is a good practice to remove MinimumWidthRequest and MinimumHeightRequest. This is safe ONLY if you are sure the image have this minimum size. Otherwise, your image will not appear.
To know more about image in Xamarin, see here.
And to understand the difference between the ways of set an ImageSource see here.
I have an absolutelayout which has a Button and an Image laid into the same space, with the image coming second to be on top. Its just to position the image where i like on the button rather than where it goes using ImageSource attribute.
This works fine when the page is shown originally, but once you press one of those buttons, the image that was overtop disappears. Its almost like it falls behind in Z order or something - however in the OnClick method I tried doing
AbsoluteLayout.RaiseChild(image);
as well as
AbsoluteLayout.Children.Remove(image);
AbsoluteLayout.Children.Insert(0, image);
but neither seems to bring it back to visibility.
Is this just an oversight somewhere on my part, or is there a trick to keeping the image on top (or visible, if its not a depth issue)
This problem is caused by Fast Renderers in Xamarin Forms.
You could enable the legacy renderers by adding the following line of code to your MainActivity class before calling Forms.Init:
Forms.SetFlags("UseLegacyRenderers");
Here is my Xaml code:
<AbsoluteLayout x:Name="myAbsoluteLayout">
<Button Text="Button"
BackgroundColor="LightBlue"
Clicked="Button_Clicked"
x:Name="button"
AbsoluteLayout.LayoutBounds="0.5,0,100,50"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<Image x:Name="firstImage"
Source="icon.png"
InputTransparent="False"
AbsoluteLayout.LayoutBounds="0.5,0,25,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
The effect:
I'm building a Xamarin.Forms app and I need to set the background of the nav bars to an image. Is this possible without creating something super custom? If not, what's the best way to go about it? Has anyone else done it already?
Here's what I need to do. Note the nav bar area with the back button, messaging icon, and "COMMENTARY" text.
Any ideas?
It's not possible with xamarin to change the navigation background image. You have to do that in native for each platform.
Android :
in Ressources/layout/Toolbar.axml remove background color and add :
android:background="#drawable/yourImage"
2. iOS
in AppDelegate.cs add :
UINavigationBar.Appearance.BarTintColor=UIColor.FromPatternImage(UIImage.FromFile("YOURIMAGE.png"));
// To change Text Colors to white here
UINavigationBar.Appearance.TintColor=UIColor.White;
// To change Title Text colors to white here
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes() { TextColor = UIColor.White});
Images
Don't forget to put your images in different ressources folders.
Hope this help you !
You can add a background image and buttons to Navigation bar. element can be used to customise the element. You could use AbsoluteLayout to achieve what you want (button, Text ...etc)
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MobileApp.Views.PhotoUploadPage">
<NavigationPage.TitleView>
<StackLayout>
<Image Source="background_image.jpg"></Image>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Multiple Photo Upload!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
https://forums.xamarin.com/discussion/139894/putting-an-image-on-navigation-bar
I have a WP7 application displaying 3 thumbnails at the bottom and a big one at the center of the screen. Upon clicking on each thumbnail, a method in the xaml.cs file is triggered replacing the source of the big image to display an enlarged version of the thumbnail.
Now, I added a textbox at the bottom of the big image that would display text describing each image. Such text is stored as separate strings in a RESX file for each locale (en, fr).
In the existing 3 methods that update the big image upon clicking on each of the 3 thumbnails, I want to add a line to also update the text of the textbox, displaying the correct string for the current locale of Windows Phone 7.
private void thumb1_Click(object sender, RoutedEventArgs e)
{
Uri uri = new Uri("/myApp;component/Images/Dialog%20-%20Blocked%20Sites.png", UriKind.Relative);
ImageSource newSource = new System.Windows.Media.Imaging.BitmapImage(uri);
imgTarget.Source = newSource;
imgDesc.Text = "placeholderDesc1";
}
I know how to use binding to display localized text from the resx files in the XAML but I don't know the syntax in the xaml.cs code file. Could you please assist?
<TextBlock Height="67" Name="appDesc" Style="{StaticResource PhoneTextTitle1Style}" Text="{Binding Path=LocalizedResources.appDesc, Source={StaticResource LocalizedStrings}}" FontSize="22" TextWrapping="Wrap" />
Many thanks.
Try
AppResources.appDesc
Nothing more