I have one entry and a image, as initial load of page i want to show close.png image, after entry is focus or user type anything in entry i want to show searchingicon.png image.
<Entry x:Name="MainSearchPage"/>
<Image Grid.Row="0" Source="close.png" Style="{DynamicResource EntryIcons}" Grid.Column="1" HeightRequest="16" WidthRequest="15" Margin="0,0,0,0" Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ClearCommand}"/>
</Image.GestureRecognizers>
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding Source={x:Reference MainSearchPage},Path=Text.Length}" Value="0">
<Setter Property="Source" Value="searchingicon.png" />
</DataTrigger>
</Image.Triggers>
</Image>
You can try to use the following code to do that.
<Image Grid.Row="0" Source="searchingicon.png" Style="{DynamicResource EntryIcons}" Grid.Column="1" HeightRequest="16" WidthRequest="15" Margin="0,0,0,0" Aspect="AspectFit">
<Image.Triggers>
<MultiTrigger TargetType="Image">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference MainSearchPage}, Path=IsFocused}" Value="false"/>
<BindingCondition Binding="{Binding Source={x:Reference MainSearchPage}, Path=Text}" Value="{x:Null}"/>
</MultiTrigger.Conditions>
<Setter Property="Source" Value="close.png" />
</MultiTrigger>
<MultiTrigger TargetType="Image">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference MainSearchPage}, Path=IsFocused}" Value="false"/>
<BindingCondition Binding="{Binding Source={x:Reference MainSearchPage}, Path=Text.Length}" Value="0"/>
</MultiTrigger.Conditions>
<Setter Property="Source" Value="close.png" />
</MultiTrigger>
</Image.Triggers>
</Image>
You just want to show close.png in two conditions:
The entry is unfocused and the entry's text length is 0, this is what the second <MultiTrigger> does.
The page is initial load (means the entry's text is null) and the entry is unfocused, this is what the first <MultiTrigger> does.
Related
I have a ControlTemplate to modify the appearance of a radioButton in Xamarin.Forms.
I borrowed/updated it from https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/radiobutton#redefine-radiobutton-appearance
It looks great, and the appearance is perfect when the page is created.
I want the image in the radiobutton to change depending on a binding, which it does not do.
The binding property gets modified, OnPropertyChanged() gets called, but the binding is not getting triggered.
Here is the general appearance (with two of these RadioButtons side by side)
Again, the appearance and the Converter and everything work just fine, but only when the page is first drawn.
Here is the ControlTemplate
<ControlTemplate x:Key="RadioButtonTemplate">
<Frame
BackgroundColor="#30888888"
HasShadow="False"
HeightRequest="{TemplateBinding HeightRequest}"
WidthRequest="{TemplateBinding WidthRequest}"
HorizontalOptions="Start"
VerticalOptions="StartAndExpand"
Padding="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BorderColor" Value="Accent" />
<Setter TargetName="check"
Property="Opacity"
Value="1" />
<Setter TargetName="checkrim"
Property="Opacity"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{DynamicResource TransparentBackgroundColour}" />
<Setter Property="BorderColor" Value="Transparent" />
<Setter TargetName="check"
Property="Opacity"
Value="0" />
<Setter TargetName="checkrim"
Property="Opacity"
Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid Margin="4"
WidthRequest="100">
<ContentPresenter Margin="6" />
<Grid WidthRequest="20"
HeightRequest="20"
Padding="0"
HorizontalOptions="Start"
VerticalOptions="Start">
<Ellipse x:Name="unckecd"
Stroke="White"
StrokeThickness="2"
Fill="Transparent"
Margin="0"
WidthRequest="20" HeightRequest="20"
HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="checkrim"
Stroke="Accent"
StrokeThickness="2"
Fill="Transparent"
Margin="0"
WidthRequest="20" HeightRequest="20"
HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check"
Fill="Accent"
Margin="1,1,0,0"
WidthRequest="10" HeightRequest="10"
HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</Grid>
</Frame>
</ControlTemplate>
And the Style of my RadioButton
<Style x:Key="FancyRadioButton" TargetType="RadioButton">
<Setter Property="ControlTemplate"
Value="{DynamicResource RadioButtonTemplate}" />
</Style>
And my RadioButton
<RadioButton Style="{StaticResource FancyRadioButton}"
Value="{x:Static gdl90Types:UdpTransmitMode.UdpUnicast}"
WidthRequest="150"
HeightRequest="103">
<RadioButton.Content>
<StackLayout VerticalOptions="Start" Spacing="0" Margin="0, -3">
<Image Source="{Binding Source=ColourPresetSetting,
ConverterParameter=unicast,
Converter={StaticResource ResourceImageFromThemeConverter}}"
Margin="22,0"
Aspect="AspectFit"
/>
<Label Text="UDP UNICAST" TextColor="{DynamicResource MediumContrastTextColour}" />
</StackLayout>
</RadioButton.Content>
All I want is for the Image in the RadioButton to notice the property ColourPresetSetting changing, to update the image.
It does it when first drawn, but no longer after that.
Am I missing something obvious?
Hello I'm working on a xamrain forms app that has a main menu and when you click the math button it supposed to take you to the MathHome page however it crashes after you click the button on the home page
heres my code for the mathpage:
<?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:SchoolTools.Math.ViewModels;assembly=SchoolTools"
x:Class="SchoolTools.MathPage">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="NumberStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="White"/>
<Setter Property="TextColor" Value="Black"/>
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="Font" Value="36"/>
</Style>
<Style x:Key="OperationsStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="#FFA500"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="Font" Value="36"/>
</Style>
<Style x:Key="BackSpaceButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Black"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="Font" Value="Bold,40"/>
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
</Style>
<Style x:Key="CleanButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Teal"/>
<Setter Property="TextColor" Value="Black"/>
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="Font" Value="36"/>
</Style>
<Style x:Key="MainLabelStyle" TargetType="Label">
<Setter Property="BackgroundColor" Value="Black"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="Font" Value="35"/>
<Setter Property="YAlign" Value="Center"/>
<Setter Property="XAlign" Value="Center"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Grid Padding="5,0" RowSpacing="1" BackgroundColor="Black" ColumnSpacing="1">
<Grid.BindingContext>
<local:MainViewModel />
</Grid.BindingContext>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"
Text="{Binding DisplayValue}" Style="{DynamicResource MainLabelStyle}" />
<Button Text="←" Grid.Row="1" Grid.Column="3" Command="{Binding BackspaceCommand}"
Style="{DynamicResource BackSpaceButtonStyle}" />
<Button Text="7" Grid.Row="3" Grid.Column="0" Command="{Binding NumberComamnd}"
CommandParameter="7" Style="{DynamicResource NumberStyle}"/>
<Button Text="8" Grid.Row="3" Grid.Column="1" Command="{Binding NumberComamnd}"
CommandParameter="8" Style="{DynamicResource NumberStyle}"/>
<Button Text="9" Grid.Row="3" Grid.Column="2" Command="{Binding NumberComamnd}"
CommandParameter="9" Style="{DynamicResource NumberStyle}"/>
<Button Text="4" Grid.Row="4" Grid.Column="0" Command="{Binding NumberComamnd}"
CommandParameter="4" Style="{DynamicResource NumberStyle}"/>
<Button Text="5" Grid.Row="4" Grid.Column="1" Command="{Binding NumberComamnd}"
CommandParameter="5" Style="{DynamicResource NumberStyle}"/>
<Button Text="6" Grid.Row="4" Grid.Column="2" Command="{Binding NumberComamnd}"
CommandParameter="6" Style="{DynamicResource NumberStyle}"/>
<Button Text="1" Grid.Row="5" Grid.Column="0" Command="{Binding NumberComamnd}"
CommandParameter="1" Style="{DynamicResource NumberStyle}"/>
<Button Text="2" Grid.Row="5" Grid.Column="1" Command="{Binding NumberComamnd}"
CommandParameter="2" Style="{DynamicResource NumberStyle}"/>
<Button Text="3" Grid.Row="5" Grid.Column="2" Command="{Binding NumberComamnd}"
CommandParameter="3" Style="{DynamicResource NumberStyle}"/>
<Button Text="0" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="3"
CommandParameter="0" Style="{DynamicResource NumberStyle}" Command="{Binding NumberComamnd}" />
<Button Text="." Grid.Row="6" Grid.Column="3" Command="{Binding AddPointCommand}"
Style="{DynamicResource OperationsStyle}"/>
<Button Text="/" Grid.Row="2" Grid.Column="2" Command="{Binding OperatorCommand}"
CommandParameter="/" Style="{DynamicResource OperationsStyle}"/>
<Button Text="x" Grid.Row="2" Grid.Column="3" Command="{Binding OperatorCommand}"
CommandParameter="x" Style="{DynamicResource OperationsStyle}" Font="25"/>
<Button Text="-" Grid.Row="3" Grid.Column="3" Command="{Binding OperatorCommand}"
CommandParameter="-" Style="{DynamicResource OperationsStyle}"/>
<Button Text="+" Grid.Row="4" Grid.Column="3" Command="{Binding OperatorCommand}"
CommandParameter="+" Style="{DynamicResource OperationsStyle}"/>
<Button Text="√" Grid.Row="2" Grid.Column="1" Command="{Binding OperatorCommand}"
CommandParameter="√" Style="{DynamicResource OperationsStyle}"/>
<Button Text="=" Grid.Row="5" Grid.Column="3" Command="{Binding CalculationCommand}"
Style="{DynamicResource OperationsStyle}"/>
<Button Text="C" Grid.Row="2" Grid.Column="0" Command="{Binding CleanCommand}"
Style="{DynamicResource CleanButtonStyle}"/>
</Grid>
</ContentPage>
I think my xmlns:local is messed up the class the xaml references is MainViewModel witch is in a folder in the project called Math and then sub folder within math called ViewModels
Any ideas on how to fix this issue?
The problem does not seem to be in your local namespace declaration but seems to be in you using properties which are marked as obsolete.
Have a look at this piece of your XAML, to which your error messages refer.
<Style x:Key="MainLabelStyle" TargetType="Label">
<Setter Property="BackgroundColor" Value="Black"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="Font" Value="35"/>
<Setter Property="YAlign" Value="Center"/>
<Setter Property="XAlign" Value="Center"/>
</Style>
If we lookup the YAlign and XAlign in the Xamarin Forms documentation, you'll see they are marked as obsolete. You should now use VerticalTextAlignment and HorizontalTextAlignment respectively.
I'm currently facing a problem in one of my Xaml Files. I created a combox with 2 fixed combobox Items. I also created a textblock. Here is the xaml code :
<StackPanel>
<TextBlock Grid.Column="0" x:Name="UserSettingsConnectorGroupBoxProductTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Strings.UserSettingsConnectorGroupBoxProductText, Source={StaticResource StringLocalizer}}" VerticalAlignment="Center" Margin="10,0,0,0" />
<ComboBox Grid.Column="1" x:Name="UserSettingsConnectorGroupBoxProductComboBox" VerticalAlignment="Center" Width="300" HorizontalAlignment="Left" Margin="10,5,0,0" SelectionChanged="UserSettingsConnectorGroupBoxProductComboBox_SelectionChanged" >
<ComboBoxItem Content="Microsoft Deployment Toolkit" />
<ComboBoxItem Content="Microsoft System Center Configuration Manager" />
</ComboBox>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="10,0,0,0">
<TextBlock Name="ConnectorTextBlock" Text="toto" Margin="0,5" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft Deployment Toolkit">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathMDT, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft System Center Configuration Manager">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathSCCM, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<StackPanel Orientation="Horizontal" >
<TextBox Name="ConnectorTextBox" Margin="0,5" Width="300">
</TextBox>
<Button Content="Test" Margin="5" Width="100" HorizontalAlignment="Right"/>
</StackPanel>
<Button Content="Save" Width="100" HorizontalAlignment="Left" Margin="0,5" IsEnabled="False"/>
</StackPanel>
And a preview :
enter image description here
I would like the text of textBlock named "ConnectorTextBox" changes when the combobox Selected Item Changes. In order to do this, i created 2 datatriggers in TextBlock bound to "Text" Property of Combobox Control. Depending on the value of Text property, the Text value of textblock changes.
But it does not function. Only default value "Toto" is diplayed, even if i change my combobox Selection.
Any help would be greatly appreciated :) :)
Regis
Avoid setting Text property of TextBlock. Try this
<TextBlock Name="ConnectorTextBlock" Margin="0,5" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft Deployment Toolkit">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathMDT, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft System Center Configuration Manager">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathSCCM, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
If you want to set a default value, do it as below
<TextBlock Name="ConnectorTextBlock" Margin="0,5" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="Toto" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft Deployment Toolkit">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathMDT, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft System Center Configuration Manager">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathSCCM, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Hope this helps!!
Have two behaviors that change a path's opacity based on its container button's IsEnabled property. I have several buttons that I want to reuse these two behaviors for that have the same path up to their containers. How do I do that?
<Button x:Name="buttonConcentration">
<Canvas Width="42.6667" Height="42.6667">
<Path Opacity="0.2" Width="42.835" Height="42.696" Stretch="Fill"
Data="..." UseLayoutRounding="False">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior
Binding="{Binding IsEnabled, ElementName=buttonConcentration}"
Value="False">
<Core:ChangePropertyAction PropertyName="Opacity" Value="0.2"/>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior
Binding="{Binding IsEnabled, ElementName=buttonConcentration}"
Value="True">
<Core:ChangePropertyAction PropertyName="Opacity" Value="1"/>
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Path>
</Canvas>
</Button>
Try setting it on your Window.Resources.
Maybe working over this code you'll be able to achieve what you are expecting:
<Window.Resources>
<Button x:Key="myButtonConcentration" x:Shared="False">
<Canvas Width="42.6667" Height="42.6667">
<Path Opacity="0.2" Width="42.835" Height="42.696" Stretch="Fill"
Data="..." UseLayoutRounding="False">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior
Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled}"
Value="False">
<Core:ChangePropertyAction PropertyName="Opacity" Value="0.2"/>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior
Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled}"
Value="True">
<Core:ChangePropertyAction PropertyName="Opacity" Value="1"/>
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Path>
</Canvas>
</Button>
</Window.Resources>
<Grid>
<ContentControl Name="MyButton1" Content="{StaticResource myButtonConcentration}" />
<ContentControl Name="MyButton2" Content="{StaticResource myButtonConcentration}" />
</Grid>
Hmmm. . . I'm losing my mind. . . or am I?
I'm creating a WPF app for some basic data entry. I'm using textblocks to label the textboxes but ran into a snag. Why can't I vertically center the textblocks? I can't change the vertical alignment at all. Regardless of what I value I set on the property, the textblocks remain at the top. I want them centered! I can change the horizontal alignment no problem.
The contents of the XAML file, including the styles, are included below.
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SL3_ContactEntry.MainPage"
Width="500"
Background="#FF99DF52">
<UserControl.Resources>
<Style x:Key="MyTextBlockStyle"
TargetType="TextBlock">
<Setter Property="FontSize"
Value="12" />
<Setter Property="Margin"
Value="2" />
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="28" />
<Setter Property="HorizontalAlignment"
Value="Right" />
<Setter Property="VerticalAlignment"
Value="Center" />
</Style>
<Style x:Key="MyTextBoxStyle"
TargetType="TextBox">
<Setter Property="FontSize"
Value="12" />
<Setter Property="Margin"
Value="2" />
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="28" />
</Style>
<Style x:Key="MyButtonStyle"
TargetType="Button">
<Setter Property="FontSize"
Value="12" />
<Setter Property="Margin"
Value="2" />
<Setter Property="Width"
Value="100" />
<Setter Property="Height"
Value="33" />
</Style>
</UserControl.Resources>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="0.81*" />
<RowDefinition Height="0.19*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical"
Grid.Column="0"
Margin="5">
<TextBlock Name="FName"
Text="First Name"
Style="{StaticResource MyTextBlockStyle}" />
<TextBlock Name="LName"
Text="Last Name"
Style="{StaticResource MyTextBlockStyle}" />
<TextBlock Name="StreetAddress"
Text="Street Address"
Style="{StaticResource MyTextBlockStyle}" />
<TextBlock Name="City"
Text="City"
Style="{StaticResource MyTextBlockStyle}" />
<TextBlock Name="State"
Text="State"
Style="{StaticResource MyTextBlockStyle}" />
<TextBlock Name="ZipCode"
Text="Zip Code"
Style="{StaticResource MyTextBlockStyle}" />
</StackPanel>
<StackPanel Orientation="Vertical"
Grid.Column="1"
Margin="5">
<TextBox Name="txtFName"
Style="{StaticResource MyTextBoxStyle}" />
<TextBox Name="txtLName"
Style="{StaticResource MyTextBoxStyle}" />
<TextBox Name="txtStreetAddress"
Style="{StaticResource MyTextBoxStyle}" />
<TextBox Name="txtCity"
Style="{StaticResource MyTextBoxStyle}" />
<TextBox Name="txtState"
Style="{StaticResource MyTextBoxStyle}" />
<TextBox Name="txtZipCode"
Style="{StaticResource MyTextBoxStyle}" />
<Button Content="OK"
Style="{StaticResource MyButtonStyle}" />
</StackPanel>
</Grid>
</UserControl>
I am not 100% sure why it is not centering, probably has to do with the height set on the elements, but what you can do is apply a padding to the TextBlocks to get them centered with the TextBoxes.