Button's Background in Xaml UWP - c#

in a UWP application I have a button its Background property is set to "DeepPink", but whenever I hover my mouse over it, it changes to gray (the default color),
here is my code:
<Button Content="Hello World" Margin="100,0,0,0" Background="DeepPink"/>
Am I missing something??

That only defines the default state of the button, not the hover state.
You can either create a custom control template (you can see an example here), or go the easy way of changing colors with Lightweight styling - I'd recommend the second!

The best alternative would be to create Buttons like UI using Frame and Label. In this case, the background color will remain the same.
Example:
<Frame Padding="8" WidthRequest="100" HasShadow="False" BorderColor="Gray"
HorizontalOptions="Center">
<Label Text="Button" HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>

Related

Is there any way to add background Image on navigationbar page by page on xamarin forms

Is there any way to add background Image on navigationbar page by page on xamarin forms?
The would need to write a custom render to change the background of the navigation bar. This is simply because the navigation bar does not have an option to change the background image.
https://books.google.co.uk/books/about/Xamarin_Forms_Solutions.html?id=wvt9DwAAQBAJ&printsec=frontcover&source=kp_read_button&redir_esc=y#v=onepage&q&f=false
There's a good very brief section about how to write custom renders is this ^ book (you can even find it in the preview without purchasing it).
An alternative solution would be to create a custom banner at the top of the page
https://forums.xamarin.com/discussion/126227/customizing-navigation-bar-or-action-bar-in-xamarin-forms[As mentioned in this answer2
<ContentPage NavigationPage.HasNavigationBar="false">
<StackLayout VerticalOptions="Start"
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="10,5,10,5>
<Image HorizontalOptions="StartAndExpand" source="yourimage.png"/>
<Label HorizontalOptions="CenterAndExpand" Text="ALL"/>
<Image HorizontalOptions="EndAndExpand" source="yourimage.png"/>
</StackLayout>
<StackLayout>
<!-- Place your code for page body-->
</StackLayout>
</ContentPage>
I've copied the code into here for simplicity and reference. This solution removes the navigation bar and allows you to create a custom banner on each page in XAML. In here you can change the layout as you please.

How to build Custom Xamarin Forms Entry with Icon, placeholder label and border with curved corners?

I'm new to Xamarin and would like to know where to start with this.
I have a need to make a Xamarin Forms custom Entry. That Entry needs an Icon and a border with rounded corners and a place holder label. This is a mock up of what is needed:"
The Behavior is that the Text "Input" will show the placeholder text until the user starts typing then the "Label" will appear with the text form the place holder. So the "Label" will be hidden until the user starts typing.
(with placeholder text)
So is it possible to build this Entry without a custom entry renderer? How would would put the label in a custom renderer if needed.
I would apprentice any help in getting started with this.
You could roll this yourself, but someone else has already done all the hard work for you. Take a look at the Xfx.Controls library. The XfxEntry looks to be exactly what you're looking for. All you need to do is:
Grab the nuget package, and install it in your main and platform projects.
Make sure that you initialize the library in your Android and iOS projects.
At the top of the xaml page it's going to be used in, import the library in with something like xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls".
Use the control, with something like:
<xfx:XfxEntry Placeholder="Email"
Text="{Binding Email}" />
After that you would need to create your own custom control and place the control in it. To get the rounded corners, you'll want your control to inherit from frame. This might look something like
<Frame x:Class="App1.MyCustomEntry"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"
BorderColor="LightBlue"
CornerRadius="15" HorizontalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="email.png" />
<xfx:XfxEntry Grid.Column="1" Placeholder="Email*" />
</Grid>
Notice the BorderColor and CornerRadius properties. Also, if you just add a new content view, you'll need to change the code behind file to inheriate from Frame: public partial class MyCustomEntry : Frame.
From there, it's a simple matter of inserting the control into your page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App1"
x:Class="App1.MainPage">
<local:MyCustomEntry VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>
This should give you something like:
You can tweak the layout options as needed.

Removing Tap Event in a Frame in Xamarin Forms

I have a label inside of a Frame in Xamarin Forms.
<Frame BackgroundColor="{x:Static resources:AppStyleConstants.HeaderColor}" Margin="0,10,0,10">
<Label
Text="{x:Static resources:Labels.ChooseProviderTitle}" HorizontalOptions="Start"
VerticalOptions="Center"
FontSize="48"
TextColor="White" />
</Frame>
Now when I tap on it, I keep on hearing the tap sound. I am assuming that there is a default tap attached to the frame since after removing the frame, the sound disappears as well. I want to get rid of that sound since the clients think (clients are elderly people) that an action is supposed to happen. Can anyone suggest something I can do to remove the sound coming?

MouseEnter event: how to show data of one control into another?

I Use Visual Studio, C# and WPF. I create a main window called "WindowsMonopoly" and an user control called "CasellaColore", with some properties. In the "WindowMonopoly" I put more of the "CasellaColore". I have this situation:
<Monopoly:CasellaColore x:Name="Casella8" Grid.Row="10" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Indice="8" ColoreCasella="Black"/>
<Monopoly:CasellaColore x:Name="Casella9" Grid.Row="10" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Indice="9" ColoreCasella="Black"/>
etc...
Now I want that when I put my cursor on one of the "CasellaColore", this must be showed into a grid. Explaining with simple language:
When the cursor is on the "CasellaColore", then show this "CasellaColore" into a grid into the "WindowMonopoly".
I must redo "all" the Monopoly, for as a school's exercise. My knowledge of C# and WPF is limited, but I'm one of the best of my class in programming.

Focus on Canvas overlapping the listbox in WP7

I have a situation here. I have a page containing a ListBox. The ListBox is populated with Items if it is able to fetch the data from a web service. Now when the user doesn't have network connectivity on his phone or the webservice doesn't respond back with Ok status, I want to show the user a pop-up with an option to Retry or select Ok to stay on the same page (though it sounds dumb). Now for this I used a Canvas:
<Canvas Name="Nonetwork" Height="150" Width="280" HorizontalAlignment="Center" VerticalAlignment="Center" Background="DodgerBlue" Visibility="Collapsed" Margin="111,160,92,160" >
<TextBlock VerticalAlignment="Top" Height="120" Width="280" Text="No Network is currently availabe" TextAlignment="Center" TextWrapping="Wrap" Foreground="White" FontSize="28" />
<Button Margin="30, 80" Height="60" Width="100" Content="OK" FontSize="18" Click="Ok_Click"/>
<Button Margin="150, 80" Height="60" Width="100" Content="Retry" FontSize="18" Click="Retry_Click"/>
</Canvas>
Well as most of you experienced guys would have guessed, the canvas is buried inside the listbox and is not accessible when there is no network connectivity. So I have a blank page with the canvas but the user is not able to click on Ok or Retry. Please help
Please do let me know if there is any other approach to solve this problem. I tried Popup but I cant Navigate to the main page from a pop-up since that is a user control page. Any help is higly appreciated
Well, I placed my Canvas below the ListBox and the problem was solved. I didn't know that positioning of the controls in the XAML would have so much effect ...
The order in which elements are rendered in Silverlight is determined firstly by where they appear in the visual object hierarchy and secondly by their ZIndex property.
The Canvas has a third attached property named ZIndex that you can use to override the default layering of elements. Although this Canvas.ZIndex attached property is defined by the Canvas class, it actually works with any type of panel.
You can also try Canvas.ZIndex property:
Canvas.ZIndex Attached Property
What you do is a wrong practice and not at all recommended.
ChildWindow is the class you should use to display such kind of dialog.
Using a Popup is also another approach you can use.
NOTE: I know the simplest approach would be to use MessageBox.Show(), but it would create a popup out of silverlight frame and does not allow theming/styling and other customizations.

Categories