Is there a Xaml ComboBoxItem equivalent for an HTML select value property?
<select>
<option value=1>Test 1</option>
<option value=2>Test 2</option>
<option value=3>Test 3</option>
</select>
Doesn't seem like there's a way to do that with Xaml?
<ComboBox>
<ComboBoxItem Content="Test 1" />
<ComboBoxItem Content="Test 2" />
<ComboBoxItem Content="Test 3" />
</ComboBox>
Obviously, I'd like the user to select and option and then be able to pull the value (ID) for that selection to work with instead of having to do a lookup from the text/content value.
You can use Tag:
<ComboBox>
<ComboBoxItem Content="Test 1" Tag="1"/>
<ComboBoxItem Content="Test 2" Tag="2"/>
<ComboBoxItem Content="Test 3" Tag="3"/>
</ComboBox>
Why don't you use dropdownlist
<dropdownlist >
Your options goes here
<\dropdownlist>
Related
I have a simple (Android) application in Xamarin.
Until now, it uses a single language, now I add a translation for a second language. I use resource .resx files and I use it in XAML like this:
<Span Text="{x:Static resource:AppResources.Text1}" />
where Text1 is loaded from a resource file (depend on language).
I don't know how to do a similar thing in the next line, where I use Binding and StringFormat:
<Label Text="{Binding Datum, StringFormat='Some text: {0}'}" />
I tried with:
<Label Text="{Binding Datum, StringFormat='{x:Static resource:AppResources.Text2} {0}'}" />
but it didn't work.
Any idea?
use Spans to combine data and text
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static resource:AppResources.Text1}" />
<Span Text="{Binding Datum}" />
</FormattedString>
</Label.FormattedText>
</Label>
In a Xamarin.Forms project, I need to concatenate a Localized String value with a binding of a string property,
I want to achieve something like,
<Label Text="{Binding Name}",
StringFormat='Created By {0}' />
but Created By string should come from,
LocalizedStrings.CreatedBy
How can I achieve this?
in the xaml, add a name to reference the label,
<Label x:Name="myLabel" />
in the code-behind,
myLabel.SetBinding(
Label.TextProperty,
new Binding(nameof(MyModal.Name), stringFormat: $"{LocalizedStrings.CreatedBy} {{0}}"));
this way we can format the binding string properties with variable values.
Alternative Approach:
You can also use FormattedText property of the Label as follows, however this is not an optimized approach.
Import LocalizedStrings to xmlns:Resources, then,
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static Resources:LocalizedStrings.CreatedBy}" />
<Span Text="{Binding Name, StringFormat=' {0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
It's achievable by using the ForamttedText Property of Label. MS Docs link
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static Resources:LocalizedStrings.CreatedBy}" />
<Span Text="{Binding Name, StringFormat=' {0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
where Resources is an import for LocalizedStrings
I have developed an Universal app that uses a login form, that allowing users to connect or to create an account.
It is a simple page that looks like this:
This XAML code is also very simple:
<ScrollViewer>
<StackPanel>
<TextBlock x:Uid="loginRegisterTextblockMessage"
Style="{StaticResource TitleTextBlockStyle}"
Text="Remplissez vos informations d'inscription" />
<TextBox x:Uid="loginRegisterTextboxOrganizationURL"
Header="Organisation ou URL"
IsSpellCheckEnabled="False"
IsHitTestVisible="True"
IsTextPredictionEnabled="False"
Text="{Binding OrganizationURL, Mode=TwoWay}" />
<TextBox x:Uid="loginRegisterTextboxLastName"
Header="Nom"
Text="{Binding LastName, Mode=TwoWay}" />
<TextBox x:Uid="loginRegisterTextboxFirstName"
Header="Prénom"
Text="{Binding FirstName, Mode=TwoWay}" />
<TextBox x:Uid="loginRegisterTextboxEmail"
Header="Email"
InputScope="EmailSmtpAddress"
Text="{Binding Email, Mode=TwoWay}"/>
<PasswordBox x:Uid="loginRegisterPasswordboxPassword"
Header="Mot de passe"
Password="{Binding Password, Mode=TwoWay}" />
<PasswordBox x:Uid="loginRegisterPasswordboxConfirmPassword"
Header="Confirmez le mot de passe"
Password="{Binding PasswordConfirmation, Mode=TwoWay}" />
<CheckBox x:Uid="loginRegisterCheckboxTermsOfUse"
IsChecked="{Binding TermsOfUse, Mode=TwoWay}" >
<TextBlock Style="{StaticResource BaseTextBlockStyle}">
<Run x:Uid="loginRegisterTextblockTermsOfUse1"
Text="J'accepte les " />
<Underline>
<Hyperlink x:Uid="loginRegisterHyperlinkTermsOfUse"
NavigateUri="http://termsofuse.html" >
<Run x:Uid="loginRegisterTextblockTermsOfUse2"
Text="conditions générales d'utilisation" />
</Hyperlink>
</Underline>
</TextBlock>
</CheckBox>
<Button x:Uid="loginRegisterButtonRegister"
Content="S'inscrire"
Command="{Binding RegisterCommand}" />
</StackPanel>
</ScrollViewer>
But I meet a "problem" for navigating between each fields of this page:
=> The user must click outside of a TextBlock to hide the keyboard and select the next field: this is not very user-friendly
I took a look at a similar "system" form: the page used to create an account to access to the Windows Store.
The page looks very similar to my own page:
But it is there possible to activate the next field by clicking on its header:
The focus moved on the field and the keyboard is also automatically displayed:
If I click on the the next header "Nom d'utilisateur", I can see that the next field is now "Domaine", by moving automatically into the displayed content:
=> Is there an easy way to reproduce this comportment? Is it based on the "Header" of the "TextBox", or by using seperated "TextBlock" to show the header?
I always looking for a good solution but I didn't find it.
I've added events in the XAML for the TextBox and PasswordBox on GetFocus and KeyDown.
In the Code-Behind, I can now manage the "Enter" Key, that gives the focus to the next TextBox:
private void RegisterTextBox_KeyDown(object sender, KeyRoutedEventArgs e)
{
TextBox currentTextBox = (TextBox)sender;
if (currentTextBox != null)
{
if (e.Key == Windows.System.VirtualKey.Enter)
{
FocusManager.TryMoveFocus(FocusNavigationDirection.Next);
}
}
}
But I haven't yet managed the ScrollViewer autoscroll like I hope.
I tried to inspire me from this link, but to no avail:
Keyboard-Overlaps-Textbox
=> Is there really a way to reproduce the autoscroll that is used on the registration form for the Windows Store?
I have developed an Universal app that uses a login form, that allowing users to connect or to create an account.
It is a simple form that contains TextBox and PasswordBox. My problem is that it's not easy for the user to switch between each fields:
=> For example, when the user enters in the second field, he must deactivate the keyboard, scroll in the fields and select the third field.
By comparaison, on the Windows Store account's creation form, it is more user-friendly:
=> When the user give the focus to a field, the next field is also visible, as if there is autoscroll corresponding to these fields. So the user doesn't need to deactivate the keyboard to enter in the next field. All the fields can also be easily entered.
Is there a way allowing to reproduce this?
I already use the "KeyDown" event in Code-Behind, that permitting the user to switch between the fields with "Enter":
private void RegisterTextBox_KeyDown(object sender, KeyRoutedEventArgs e)
{
TextBox currentTextBox = (TextBox)sender;
if (currentTextBox != null)
{
if (e.Key == Windows.System.VirtualKey.Enter)
{
FocusManager.TryMoveFocus(FocusNavigationDirection.Next);
}
}
}
With this XAML:
<ScrollViewer x:Name="RegisterScrollViewer">
<StackPanel>
<TextBlock x:Uid="loginRegisterTextblockMessage"
Style="{StaticResource TitleTextBlockStyle}"
Text="Remplissez vos informations d'inscription" />
<TextBox x:Uid="loginRegisterTextboxOrganizationURL"
Header="Organization or URL"
IsSpellCheckEnabled="False"
IsHitTestVisible="True"
IsTextPredictionEnabled="False"
Text="{Binding OrganizationURL, Mode=TwoWay}"
TabIndex="10"
KeyDown="RegisterTextBox_KeyDown"
/>
<TextBox x:Uid="loginRegisterTextboxLastName"
Header="Name"
Text="{Binding LastName, Mode=TwoWay}"
TabIndex="20"
KeyDown="RegisterTextBox_KeyDown"
/>
<TextBox x:Uid="loginRegisterTextboxFirstName"
Header="First name"
Text="{Binding FirstName, Mode=TwoWay}"
TabIndex="30"
KeyDown="RegisterTextBox_KeyDown"
/>
<TextBox x:Uid="loginRegisterTextboxEmail"
Header="Email"
InputScope="EmailSmtpAddress"
Text="{Binding Email, Mode=TwoWay}"
TabIndex="40"
KeyDown="RegisterTextBox_KeyDown"
/>
<PasswordBox x:Uid="loginRegisterPasswordboxPassword"
Header="Password"
Password="{Binding Password, Mode=TwoWay}"
TabIndex="50"
KeyDown="RegisterPasswordBox_KeyDown"
/>
<PasswordBox x:Uid="loginRegisterPasswordboxConfirmPassword"
Header="Confirm password"
Password="{Binding PasswordConfirmation, Mode=TwoWay}"
TabIndex="60"
KeyDown="RegisterPasswordBox_KeyDown"
/>
<CheckBox x:Uid="loginRegisterCheckboxTermsOfUse"
IsChecked="{Binding TermsOfUse, Mode=TwoWay}"
TabIndex="70 ">
<TextBlock Style="{StaticResource BaseTextBlockStyle}">
<Run x:Uid="loginRegisterTextblockTermsOfUse1"
Text="I accept " />
<Underline>
<Hyperlink x:Uid="loginRegisterHyperlinkTermsOfUse"
NavigateUri="http://termsofuse.html" >
<Run x:Uid="loginRegisterTextblockTermsOfUse2"
Text="terms of use" />
</Hyperlink>
</Underline>
</TextBlock>
</CheckBox>
<Button x:Uid="loginRegisterButtonRegister"
Content="Subscribe"
Command="{Binding RegisterCommand}"
TabIndex="80"
/>
</StackPanel>
</ScrollViewer>
But this doesn't solve the problematic that occurs without using the "Enter" key.
When a TextBox got focused (focus event), you can try to use ScrollViewer.ChangeView to programmatically scroll the form to the desired position. This behavior can be improved by getting the keyboard height using InputPaneShowing and InputPaneHiding events and react accordingly.
I add a ComboBox in XAML for Windows Phone 8.1 in a StackPanel. On Running the app in the Emulator no Dropdown functionality is shown. If I Limit the StackPanel to a Height e.g. "70", only the 2 first Items are shown. If I say Height = "Auto" then all Items are shown immediately.
How can I enable the Dropdown functionality?
Header:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Combobox ..
<StackPanel Grid.Row="4" Width="350" HorizontalAlignment="Left">
<TextBlock x:Name="PlayerListPanel" TextWrapping="Wrap" Text="Select a Player" VerticalAlignment="Center" Margin="2,0,0,0" HorizontalAlignment="Left"/>
<ComboBox Name="StartPlayerComboBox" BorderThickness="1" >
<ComboBoxItem Tag="PLAYER1">Player 1</ComboBoxItem>
<ComboBoxItem Tag="PLAYER2">Player 2</ComboBoxItem>
<ComboBoxItem Tag="PLAYER3">Player 3</ComboBoxItem>
<ComboBoxItem Tag="Dummy1">1</ComboBoxItem>
<ComboBoxItem Tag="Dummy2">2</ComboBoxItem>
<ComboBoxItem Tag="Dummy3">3</ComboBoxItem>
</ComboBox>
</StackPanel>
Try LISTPICKER control..Its functions similar as ComboBox with Auto adjusting height and width..
<toolkit:ListPicker>
<toolkit:ListPickerItem Content="A+" />
<toolkit:ListPickerItem Content="B+" />
<toolkit:ListPickerItem Content="O+" />
</toolkit:ListPicker>
to use this Include following namespace in Xaml Page..ADD windows phone toolkit(click it)
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
assembly=Microsoft.Phone.Controls.Toolkit"
if further info requires... revert back...
You should provide enough height for the combobox to open properly. If you limit the height, the combobox cannot extend beyond that. So it will show only a few items. Height = "Auto" means it can take whatever height as required by it. Thus the combobox will take the height required for it to open properly.
Combobox is Windows Phone/ Windows RunTime Environment behaves differently from its Silverlight/WPF Counterparts. Here we don't have Popup to show the List of items to be selected. Hence the dropdown needs enough space to show the options.
Best thing is to leave the Height as Auto, or MinWidth for any Width requirements.
Even tho, this is an old question, in addition to what they have said, already; a way to have an item selected as the default, you need to "mark it" as follow:
<ComboBoxItem IsSelected="True">Item 1</ComboBoxItem>
Then, once you click on it, you will have all other combo box items displayed (if you define them):
<ComboBox x:Name="myComboBox" VerticalAlignment="Top" Width="350" FontFamily="open sans" FontSize="20" Height="Auto" Foreground="DarkGray" BorderBrush="Black">
<ComboBoxItem IsSelected="True">Item 1</ComboBoxItem>
<ComboBoxItem>Item 2</ComboBoxItem>
<ComboBoxItem>Item 3</ComboBoxItem>
<ComboBoxItem>Item 4</ComboBoxItem>
</ComboBox>
Hope it helps someone. Regards