<DatePicker x:Name="PatientDateOfBirthPicker"
SelectedDateChanged="PatientDateOfBirthPicker_SelectedDateChanged"
Header="بەرواری لە دایک بوون"
DayFormat="day"
MonthFormat="{}{month.integer}"
YearFormat="{}{year.full(4)}"
YearVisible="True"
FontFamily="NRT Reg"
FontSize="18"
FlowDirection="RightToLeft"
Width="400">
</DatePicker>
How to change header text align to right tried both FlowDirection="RightToLeft" and FlowDirection="LeftToRight" it give me the same result
this is my result
#Mark Feldman's answer is correct. You just need to change the header of the DataPicker and set the FlowDirection to RightToLeft
The code:
<DatePicker x:Name="PatientDateOfBirthPicker"
DayFormat="day"
MonthFormat="{}{month.integer}"
YearFormat="{}{year.full(4)}"
YearVisible="True"
FontFamily="NRT Reg"
FontSize="18"
FlowDirection="RightToLeft"
Width="400">
<DatePicker.Header>
<TextBlock Text="بەرواری لە دایک بوون" FlowDirection="RightToLeft" />
</DatePicker.Header>
</DatePicker>
The result:
The Header property is of type object, so you can replace it with a TextBlock and set the TextAlignment:
<DatePicker x:Name="PatientDateOfBirthPicker"
DayFormat="day"
MonthFormat="{}{month.integer}"
YearFormat="{}{year.full(4)}"
YearVisible="True"
FontFamily="NRT Reg"
FontSize="18"
FlowDirection="RightToLeft"
Width="400">
<DatePicker.Header>
<TextBlock Text="بەرواری لە دایک بوون" TextAlignment="Right"/>
</DatePicker.Header>
</DatePicker>
ALternatively you can replace the HeaderTemplate:
<DatePicker x:Name="PatientDateOfBirthPicker"
Header="بەرواری لە دایک بوون"
DayFormat="day"
MonthFormat="{}{month.integer}"
YearFormat="{}{year.full(4)}"
YearVisible="True"
FontFamily="NRT Reg"
FontSize="18"
FlowDirection="RightToLeft"
Width="400">
<DatePicker.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header, ElementName=PatientDateOfBirthPicker}" TextAlignment="Right"/>
</DataTemplate>
</DatePicker.HeaderTemplate>
</DatePicker>
enter code here
Related
I'm trying to apply a shadow effect on a button on a UWP application.
I'm using the UWPCommunityToolkit tool and the control DropShadowPanel. Here an example :
http://www.uwpcommunitytoolkit.com/en/master/controls/DropShadowPanel/
So my code for apply on a button control :
<controls:DropShadowPanel BlurRadius="{Binding BlurRadius.Value, Mode=OneWay}"
ShadowOpacity="{Binding Opacity.Value, Mode=OneWay}"
OffsetX="{Binding OffsetX.Value, Mode=OneWay}"
OffsetY="{Binding OffsetY.Value, Mode=OneWay}"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Button Content="My button" />
</controls:DropShadowPanel>
But the result is :
The shadow cover all my button control.
According to the doc Button control doesn't directy inherit from FrameworkElement, that is maybe a reason.
Regards
Hum problem solved by using custom values :
<controls:DropShadowPanel BlurRadius="4.0"
ShadowOpacity="0.70"
OffsetX="5.0"
OffsetY="5.0"
Color="Black"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Button Content="My button" Background="Aqua" />
</controls:DropShadowPanel>
I think my code is self explanatory:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<OnPlatform x:TypeArguments="Color">
<OnPlatform.iOS>
{DynamicResource rightBubbleFontColor}
</OnPlatform.iOS>
<OnPlatform.Android>
{DynamicResource rightBubbleFontColor}
</OnPlatform.Android>
<OnPlatform.Android>
{StaticResource rightBubbleFontColor}
</OnPlatform.Android>
</OnPlatform>
</Label>
I'm trying to dynamically bind a color to the label. Depending on the current platform, it has to be another type of resource (DynamicResource or StaticResource).
I get this exception when trying to build the solution:
System.ArgumentException: An item with the same key has already been added.
UPDATE
I now have this code:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<Label.TextColor>
<OnPlatform
x:Key="RightBubbleFontColor"
x:TypeArguments="Color"
iOS="{DynamicResource rightBubbleFontColor}"
Android="{DynamicResource rightBubbleFontColor}"
WinPhone="{StaticResource rightBubbleFontColor}">
</OnPlatform>
</Label.TextColor>
</Label>
And I get the following error message:
Object reference not set to an instance of an object.
When I replace the binding to a color it works.
Working example:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<Label.TextColor>
<OnPlatform
x:Key="RightBubbleFontColor"
x:TypeArguments="Color"
iOS="Red"
Android="Green"
WinPhone="Blue">
</OnPlatform>
</Label.TextColor>
</Label>
So it has to be an issue with the way I'm trying to bind this I guess.
EDIT
Asked a new question to describe the problem better: https://stackoverflow.com/questions/39852888/xamarin-forms-use-dynamicresource-or-staticresource-depending-on-os
You have two <OnPlatform.Android> elements. I'm assuming the last would be <OnPlatform.WinPhone>.
EDITED
Now that you have that fixed, maybe try this for it to actually work?
<OnPlatform
x:Key="BubbleTextColor"
x:TypedArguments="Color"
iOS="{DynamicResource rightBubbleFontColor}"
Android="{DynamicResource rightBubbleFontColor}"
WinPhone="{StaticResource rightBubbleFontColor}" />
Then bind it where necessary.
Not sure if it will work any differently than what you already have, but I guess it's worth a shot.
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.
Here's the code for the GridView Control that I'm using (made on BlankPage App):
<GridView HorizontalAlignment="Left" x:Name="gridView1" Margin="227,220,0,53" Width="1087">
<Button x:Name="XboxButton" Margin="10,10,10,10" Style="{StaticResource XboxButton}" Height="200" Click="SnappedXboxButton_Click_1"/>
<Button x:Name="PS3Button" Margin="10,10,10,10" Style="{StaticResource PS3Button}" Click="SnappedPS3Button_Click_1" />
<Button x:Name="PCButton" Margin="10,10,10,10" Style="{StaticResource PCButton}" Click="SnappedPCButton_Click_1" />
<Button x:Name="DSButton" Margin="10,10,10,10" Style="{StaticResource DSButton}" Click="SnappedDSButton_Click_1" />
<Button x:Name="PSPButton" Margin="10,10,10,10" Style="{StaticResource PSPButton}" Click="SnappedPSPButton_Click_1" />
<Button x:Name="ContactButton1" Margin="10,10,10,10" Style="{StaticResource ContactButton}" Click="SnappedContactButton_Click_1" />
<Button x:Name="PrivacyButton" Margin="10,10,10,10" Style="{StaticResource DisclaimerButton}" Click="SnappedPrivacyButton_Click_1"/>
</GridView>
The problem is when the app first loads it shows the GridView is shown like this:
(Please go here, since, I'm new, I'm not allowed to post images)
http://social.msdn.microsoft.com/Forums/getfile/189014
But when I click any item and GO BACK to the first page the render is fine as shown in this image:
http://social.msdn.microsoft.com/Forums/getfile/189015
Improve tour markup.
1. In the GridView define a style resource for buttons, or in app resources create a base style and then use it in each button style using BasedOn={StaticResource binding notation
2. Set the margin,width,height , as I see all buttons have same property values
3. Id you don't want GridView set width or height values automaticly, ensure you set the values in the styles
Both VariableSizedWrapGrid and WrapGrid have strange measuring - they measure all children based on the first item.
Because of that, the following XAML will clip the third item.
<VariableSizedWrapGrid Orientation="Horizontal">
<Rectangle Width="50" Height="100" Margin="5" Fill="Blue" />
<Rectangle Width="50" Height="50" Margin="5" Fill="Red" />
<Rectangle Width="50" Height="150" Margin="5" Fill="Green" />
<Rectangle Width="50" Height="50" Margin="5" Fill="Red" />
<Rectangle Width="50" Height="100" Margin="5" Fill="Red" />
</VariableSizedWrapGrid>
Seems like VariableSizedWrapGrid measures the first item and then the rest children are measured with desired size of the first one.
Any workarounds?
You need to use the Attached Properties on each Rectangle VariableSizeWrapGrid.ColumnSpan and VariableSizeWrapGrid.RowSpan as well as add an ItemHeight and ItemWidth to the VariableSizeWrapGrid:
<VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="50" ItemWidth="50">
<Rectangle
VariableSizedWrapGrid.ColumnSpan="1"
VariableSizedWrapGrid.RowSpan="2"
Width="50" Height="100" Margin="5" Fill="Blue" />
</VariableSizedWrapGrid>
Its may be not the best way but this is how I have done this in my #MetroRSSReader app
<common:VariableGridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="225"
ItemHeight="{Binding ElementName=bounds, Path=Text}"
MaximumRowsOrColumns="5" Orientation="Vertical"
/>
</ItemsPanelTemplate>
</common:VariableGridView.ItemsPanel>
</common:VariableGridView>
Notice the ItemHeight value is bound to a TextBlock
<TextBlock x:Name="bounds" Grid.Row="1" Margin="316,8,0,33" Visibility="Collapsed"/>
Which is set in the LayoutAwarePage.cs
public string Fix_item_height_for_current_screen_resolution()
{
var screenheight = CoreWindow.GetForCurrentThread().Bounds.Height;
var itemHeight = screenheight < 1000 ? "100" : "140";
return itemHeight;
}
You can browse the full source code http://metrorssreader.codeplex.com/SourceControl/changeset/view/18233#265970
To use a VariableSizeWrapGrid you should create your own GridView custom control and override PrepareContainerForItemOverride and set the elements RowSpan and ColumnSpan inside that method. That way each element will have its own height/width.
Here is a nice tutorial/walk through by Jerry Nixon : http://dotnet.dzone.com/articles/windows-8-beauty-tip-using
Managed to figure this one out today. You'll need to make use of VisualTreeHelperExtension.cs in the WinRT XAML Toolkit (http://winrtxamltoolkit.codeplex.com). For me I was trying to adjust a ListView that had a GridView as its ItemsPanelTemplate, the same concept should apply for you.
1) Attach to the LayoutUpdated event of your ListView (this is when you'll want to update the sizes)
_myList.LayoutUpdated += _myList_LayoutUpdated;
2) Use VisualTreeHelperExtensions.GetDescendantsOfType() to find a common (and unique) element type in your item's data template (ex: a TextBlock that is dynamic in width):
var items = VisualTreeHelperExtensions.GetDescendantsOfType<TextBlock>(_myList);
if (items == null || items.Count() == 0)
return;
3) Get the max width of the items found:
double maxWidth = items.Max(i => i.ActualWidth) + 8;
4) Use VisualTreeHelperExtensions.GetDescendantsOfType() to find the main WrapGrid container for your ListView:
var wg = _categoryList.GetDescendantsOfType<WrapGrid>();
if (wg == null || wg.Count() != 1)
throw new InvalidOperationException("Couldn't find main ListView container");
5) Set the WrapGrid's ItemWidth to the maxWidth you calculated:
wg.First().ItemWidth = maxWidth;