I am adding localization to my UWP app by adding x:uid tags to all of my elements and using the multilingual toolkit. However I've run into an issue where in one case I change the text itself in the narrow view using the visualstatemanager. How can I do this in a localized app? My first thought would be to change the uid of the element to the new match the new text, I'm not sure it's possible.
Here is an example of what I'd like to do, but doesn't work:
<textblock x:Name="DescriptionTextBox" x:uid="DescriptionTextBox"/> // Normal long description
....
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="DescriptionTextBox.Uid" Value="DescriptionTextBoxShort" /> // Uid of short description
x:Uid is no dependency property on your TextBlock and can't be set at runtime. You can double check this by going to the generated code behind (.g.i.cs file) of your XAML page. To do this, hit F12 on InitializeComponent() in the constructor. Now locate your control in the generated code and start drilling down the object tree: you won't encounter a Uid property. It's a XAML directive backed up by an attribute.
How I typically solve this is having 2 TextBlocks (one collapsed) with the the long and short text and toggle Visibility between both TextBlocks in your VisualStates. Depending on what the parent container of these TextBlocks is, you might need to add a StackPanel or Grid as some parent controls can only have 1 child element.
Related
I want to change the position of image and Text when the user resize the app window and width is very small. Please refer the attached gif which shows it happening for a Windows Settings app. I want to do achieve something similar to this.
I want to change the position of image and Text when the user resize the app window
What you are looking for is Adaptive layouts with visual states and state triggers.
When your app window grows or shrinks beyond a certain amount, you could alter layout properties to reposition, resize, reflow, reveal or replace sections of your UI. What you need is to define different visual states for your UI first. Then apply them when the window width or window height crosses a specified threshold. The document above shows different ways to change the visual states for different windows size.
There are two common ways:
handling the Window.SizeChanged Event in the code behind. Then call the VisualStateManager.GoToState method to apply the appropriate visual state.
using the AdaptiveTrigger Class in XAML. It will be triggered to apply the visual state when the size of the window grows or shrinks beyond the value you defined.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!-- VisualState to be triggered when the
window width is >=640 effective pixels. -->
<AdaptiveTrigger MinWindowWidth="640" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="mySplitView.DisplayMode" Value="Inline"/>
<Setter Target="mySplitView.IsPaneOpen" Value="True"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Please check this document for more information and code sample: Adaptive layouts with visual states and state triggers.
I Have a label set to relative positioning and auto size as shown below
<Style TargetType="Label">
<Setter Property="BackgroundColor" Value="Transparent" />
//Something like below?
<Setter Property="AbsoluteLayout.LayoutFlags" Value="PositionProportional | SizeProportional" />
</Style>
....
<Label Text="0" AbsoluteLayout.LayoutBounds="0.5, 0.00499999999999998, AutoSize, AutoSize"/>
Is there a way to specify multiple LayoutFlags in XAML?
As I run the code on devices with higher resolution the relative position of the label is correct but the size (font) of the label does not increase, although it is set to AutoSize. I figured I also needed to specify a LayoutFlag for the Label that is SizeProportional as well as PositionProportional. But how to do it in XAML? Currently the fonts don't resize when the device is rotated to landscape orientation.
As you can read here :
AbsoluteLayout on Xamarin Documentation
Flags are also specified in the declaration of views in the layout
using the AbsoluteLayout.LayoutFlags property. Note that flags can be
combined in XAML using a comma-separated list.
So in your case, there is no point since you want to use the All value (using both Positionning and Sizing proportionnaly).
But I had to use something like this and it works just fine :
<StackLayout AbsoluteLayout.LayoutBounds="0,1,1,100"
AbsoluteLayout.LayoutFlags="XProportional,YProportional,WidthProportional">
</StackLayout>
Hope it will help people like who googled it and found this post :)
I have a SplitView:
<SplitView Name="splitView"
DisplayMode="{Binding SplitViewDisplayMode}"
IsPaneOpen="{Binding SplitViewIsPaneOpen}"
OpenPaneLength="200" CompactPaneLength="51"/>
I am also using VisualStateManager to adjust the SplitView based on application window size: (example)
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500"></AdaptiveTrigger>
</VisualState.StateTriggers>
Thus far everything works correctly, but I ran into an unexpected result when the trigger above and state below are activated.
<VisualState.Setters>
<Setter Value="True" Target="splitView.IsPaneOpen"></Setter>
<Setter Value="Overlay" Target="splitView.DisplayMode"></Setter>
</VisualState.Setters>
I cant seem to find a way to detect the event so that my ViewModel knows when the SplitView pane focus is lost. Right now as designed Overlay displays until the user clicks the view (as designed), but I'd like to know, when the SplitView Overlay is collapsed so that I can add additional binding events into my HamburgerMenu.
From what I am experiencing it appears that VisualStateManager doesn't update/change my bindings
DisplayMode="{Binding SplitViewDisplayMode}"
Any ideas as to how I can discover if/when the Overlay disappears/Closes?
The only thing I can think of is to create methods that discover the Window size, and then determine if the SplitView should be Inline/Compact/Overlay.. This is doable but would result in a lot of potential combinations.
Any thoughts or ideas on how to detect or get SplitView to tell me if Overlay is Collapsed when a user clicks a control outside of the SplitView?
To make the bindings work, you have to specify them as two way bindings. Without this, they will only update the UI with your changes in code, not the other way around:
<SplitView Name="splitView"
DisplayMode="{Binding SplitViewDisplayMode, Mode=TwoWay}"
IsPaneOpen="{Binding SplitViewIsPaneOpen, Mode=TwoWay}"
OpenPaneLength="200" CompactPaneLength="51"/>
Now your properties should be properly updated whenever the state changes.
I want to set the background image for all the pages in my windows phone 8.1 app (RT not Silverlight) by declaring a style that targets the page.
Like this:
<Style TargetType="Page">
<Setter Property="Background" Value="Red" />
</Style>
It seems to work in the designer, as I see the red background on all my pages. However when I actually run the app the background is missing (black, blank) not red.
Some of the pages in my app derive from a custom type (which derives from Page) and I know that TargetType doesn't inherit. So I added additional styles for these:
<Style TargetType="local:ViewBase">
<Setter Property="Background" Value="Red" />
</Style>
Again, in the designer I see the Red (tho strangely enough I also saw the red when I was only targeting Page). Upon launch again however, the background is not Red, but blank (black).
I could easily give it a key, or add the Background property to every page and bind it to a resource, but I thought the whole point of Implicit styles was to allow me to override every instance of the control...
Can I not target a Page for a default (implicit) style?
aha: https://social.msdn.microsoft.com/Forums/windowsapps/en-US/bb927601-2e3e-45ac-afe8-621df57b9738/why-does-style-targettypepage-not-work-in-an-application?forum=winappswithcsharp
looks like this is a known issue, boo I say! I'll set the background to a resource then.
Why don't you override brush in application resource
<SolidColorBrush x:Name="ApplicationPageBackgroundThemeBrush" Color="RED"/>
Quick question for the pros. I have a userControl sitting in the centre of my page. When the page is tapped I want to use a doubleAnimation to dock the control to the left of the page.
This line To="{Binding Canvas.Left}" is not working. I have to specify a value. eg. -200 which will animate (TranslateX) to the left but for some screens it never reaches the left of the page. How should I handle this? Also is the tapped event of the page the correct place to check for the first interaction on the page since it should only happen the first time the user interacts?
In my code behind I want to use something like if(usercontrol.left > 0){storyboard.begin;}. What is the best way to achieve this?
I will probably have to put a From={Binding UserControl.CurrentPosition} as well
Thanks
<Page.Resources>
<Storyboard x:Name="EntryAnimation">
<DoubleAnimation Duration="0:0:1"
To="{Binding Canvas.Left}"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="idcMain"
d:IsOptimized="True" />
</Storyboard>
</Page.Resources>
Instead of using storyboards, You can use system transitions (RepositionTransition in your case). This way, You Just modify the Canvas.Left property and it's automagically animated using transitions timing consistent with the global OS UX.