How can I change the color of an imagebutton on mouse over?
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DMInfoOrganizer.CheckBox">
<ContentView.Content>
<ImageButton x:Name="BtnCheck" Clicked="BtnCheck_Clicked"></ImageButton>
</ContentView.Content>
</ContentView>
I solved with the link suggested by LucasZhang-MSFT
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
Thanks a lot
Related
Om Xamarin Forms we use this code to create Master Page:
<MasterDetailPage.ToolbarItems>
<ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" Command="{Binding ControlsCommand}" />
<ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" Command="{Binding RefreshCommand}" />
<ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" Command="{Binding AboutCommand}" />
<ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}" Command="{Binding LogoutCommand}"/>
</MasterDetailPage.ToolbarItems>
<MasterDetailPage.Master>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
....
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
Now i migrate my code to version 5.0 and i change it like this (from this link):
<FlyoutPage.ToolbarItems>
<ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" />
<ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" />
<ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" />
<ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}"/>
</FlyoutPage.ToolbarItems>
<FlyoutPage.Flyout>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
...
</ContentPage>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Flyout>
Register:
containerRegistry.RegisterForNavigation<NavigationPage>("NavigationPage");
containerRegistry.RegisterForNavigation<PrismMasterDetailPage, PrismMasterDetailPageViewModel>("MasterPage");
containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
And navigation:
await NavigationService.NavigateAsync("/MasterPage/NavigationPage/MainPage");
When i try run application i got this exception:
Flyout and Detail must be set before using a FlyoutPage
What should i change in my code to work it correctly (it should show on right side MasterPage and on center of the screen MainPage) ?
EDIT:
I change my code by adding a login page. It run on App.xaml.cs likt this:
await NavigationService.NavigateAsync($"/NavigationPage/{nameof(LoginPage)}");
On LoginPageViewModel i have binded command to button where i run a method to navigate to MainPage. In Xamarin.Forms 4.8 we use that command:
await NavigationService.NavigateAsync("/MasterPage/NavigationPage/MainPage",
new NavigationParameters {{nameof(LoginPageViewModel), string.Empty}});
But now when i use it Navigation didn't work (not have any exception or somethink like that):(
When i remove /MasterPage from name i'm navigate to MainPage but i not have my MasterPage
Edit 2:
I change code form use FlyoutPage to MasterDetailPage and it start work, but MasterDetailPage is obsolete in xamarin forms 5
FlyoutPage is not supported by Prism 8. You can read more about it here and here.
AS the error shows Flyout and Detail must be set before using a FlyoutPage .
Try to set FlyoutPage.Detail as well in FlyoutPage xaml .
<FlyoutPage.Flyout>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
...
</ContentPage>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:FlyoutPage1Detail />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
Refr to https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage#create-a-flyoutpage.
Actually Prism 8 didn't support FlyoutPage, so when i back to:
<MasterDetailPage.ToolbarItems>
<ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" Command="{Binding ControlsCommand}" />
<ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" Command="{Binding RefreshCommand}" />
<ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" Command="{Binding AboutCommand}" />
<ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}" Command="{Binding LogoutCommand}"/>
</MasterDetailPage.ToolbarItems>
<MasterDetailPage.Master>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
....
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
It start work, but i have warning becouse MasterDetailPage is obsolete but work :) I need to wait for Prism 8.1 and migrate MasterDetailPage to FlyoutPage
I have a template defined in App.Xaml
<ResourceDictionary>
<ControlTemplate x:Key="HomePageTemplate">
<Label Text="{Binding MyLabelText}"/>
</ControlTemplate>
</ResourceDictionary>
And I use it in my Home page
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
xmlns:local="clr-namespace:App.Converters"
x:Class="App.Views.HomePage"
ControlTemplate="{StaticResource HomePageTemplate}">
</ContentPage>
I set the BindingContext of my Homepage in code behind.
Now shouldn't the ControlTemplate inherit the HomePage's BindingContext ? Because I thought that was the case but my Label doesn't keep the text from MyLabelText. What's the work around to work with Bindings in these templates ?
EDIT:
Using this option
<ResourceDictionary>
<ControlTemplate x:Key="HomePageTemplate">
<Label Text="{TemplateBinding Parent.BindingContext.MyLabelText}"/>
</ControlTemplate>
</ResourceDictionary>
Also does not work for me, because I use the ControlTemplatein the header of the HomePage and not inside it's body.
This works BUT IT'S NOT what I'm looking for:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
xmlns:local="clr-namespace:App.Converters"
x:Class="App.Views.HomePage"
>
<ContentView ControlTemplate="{StaticResource HomePageTemplate}" />
</ContentPage>
With ControlTemplate controls the binding is slightly different. Have a look at these docs: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/control-templates/template-binding
Assuming that the MyLabelText property is part of the BindingContext of the parent control your code could look like this:
<ResourceDictionary>
<ControlTemplate x:Key="HomePageTemplate">
<Label Text="{TemplateBinding Parent.BindingContext.MyLabelText }"/>
</ControlTemplate>
</ResourceDictionary>
App.xaml should have a BindingContext. Let's call it AppViewmodel, with a namespace vm (or any other key) defined at the top of App.xaml. This AppViewmodel can be bound to from within the ControlTemplate. In this example a button (placed in a stacklayout) is bound to a command named AppCommand, which resides in AppViewmodel. When this ControlTemplate is applied in a ContentPage, it binds to the ViewModel of App.xaml, not to the VM of that particular ContentPage. Perhaps the latter is also possible, for example by choosing the right settings for RelativeSource and AncestorType, but I haven't figured that out.
see also
<ControlTemplate x:Key="HomePageTemplate">
<StackLayout BindingContext="{Binding Source={RelativeSource TemplatedParent}}">
<Button
Command="{Binding Source={RelativeSource AncestorType={x:Type vm:AppViewModel}}, Path=AppCommand}"
/>
</StackLayout>
</ControlTemplate>
If anyone its interested, the way this works its just adding Path after TemplateBinding, specifying BindingContext on it and then the public var name:
<ResourceDictionary>
<ControlTemplate x:Key="HomePageTemplate">
<Label Text="{ TemplateBinding Path=BindingContext.MyLabelText }"/>
</ControlTemplate>
</ResourceDictionary>
I'm beginner in Xamarin Form. This's my xaml code:
<?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:local="clr-namespace:BluePin"
x:Class="BluePin.MainPage"
x:Name="MainContentPage">
<RelativeLayout>
<Image Source="BG.png"
Aspect="AspectFill"></Image>
</RelativeLayout>
</ContentPage>
enter image description here
I tested all xamarin layout and controls. Please see picture, there is red distance between layout and control (Image). how can i remove this distances and set image as full screen?
set image as full screen
there are two methods to implement this:
1.set the image as the ContentPage's background
<?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:local="clr-namespace:BluePin"
x:Class="BluePin.MainPage"
x:Name="MainContentPage"
BackgroundImage="BG.png"
>
</ContentPage>
2.use StackLayout:
<?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:local="clr-namespace:BluePin"
x:Class="BluePin.MainPage"
x:Name="MainContentPage">
<StackLayout>
<Image Source="BG.png"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Aspect="Fill" />
</StackLayout>
</ContentPage>
Try this:
<ContentPage.Content>
<RelativeLayout>
<Image Aspect="AspectFill" Source="BG.png"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"/>
</RelativeLayout>
</ContentPage.Content>
If you want to just show the image on the whole screen there is no need for you to define a parent layout secondly its a BAD performance practice to do so :
What your ContentPage XAML should look like:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="Black" x:Name="MainContentPage"
x:Class="BluePin.MainPage">
<ContentPage.Content>
<Image Source="{Binding SelectedImage}" Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Transparent" />
</ContentPage.Content>
</ContentPage>
Is it possible to add a switch on the toolbar?
<ContentPage.ToolbarItems>
<ToolbarItem>
<Switch x:Name="Switch1" IsToggled="True" Margin="5,0,0,0"/>
</ToolbarItem>
</ContentPage.ToolbarItems>
Does anybody have any ideas?
Thanks!
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TitleViewSample"
x:Class="TitleViewSample.MainPage">
<NavigationPage.TitleView>
<Switch x:Name="Switch1" IsToggled="True" Margin="5,0,0,0"/>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I don't think it is possible. You can, however, take the same approach I did when I needed to customise my title bar.
First, you hide the navigation bar, then you can specify your bar at the top, and use the controls you would like.
I want to each content page contain the following element
<xfg:ContentPageGloss.BackgroundGradient>
<xfg:Gradient Rotation="170">
<xfg:GradientStep StepColor="#9DCC5F" StepPercentage="0" />
<xfg:GradientStep StepColor="#00B0CD" StepPercentage="1" />
</xfg:Gradient>
</xfg:ContentPageGloss.BackgroundGradient>
How can I do?
Why not create an overload of the ContentPage?
Create a file, for instance, GlossContentPage.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xfg="clr-namespace:XFGloss;assembly=XFGloss"
x:Class="YourApp.Pages.GlossContentPage">
<xfg:ContentPageGloss.BackgroundGradient>
<xfg:Gradient Rotation="170">
<xfg:GradientStep StepColor="#9DCC5F" StepPercentage="0" />
<xfg:GradientStep StepColor="#00B0CD" StepPercentage="1" />
</xfg:Gradient>
</xfg:ContentPageGloss.BackgroundGradient>
</ContentPage>
Now just start using your new GlossContentPage, instead of a regular ContentPage, like:
<pages:GlossContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:YourApp.Pages;assembly=YourApp"
x:Class="YourApp.Pages.MyNewShinyPage">
<Label Text="Welcome to Xamarin.Forms" HorizontalOptions="Center" VerticalOptions="Center" />
</pages:GlossContentPage>