I try to change it and I use navigation view display mode tag but it doesn't work?
<NavigationView
Canvas.ZIndex="0"
x:Name="NavigationViewControl"
Grid.Column="1"
AlwaysShowHeader="True"
Header=" "
HeaderTemplate="{StaticResource NavigationViewHeaderTemplate}"
IsTabStop="False"
ItemInvoked="OnNavigationViewItemInvoked"
DispalyMode="Minimal">
The NavigationView has three display mode options: Minimal, Compact and Expanded. By default, the system automatically selects the optimal display mode based on the amount of screen space available to the control. But you can override this setting by using configuring its OpenPaneLength, CompactModeThresholdWidth and ExpandedModeThresholdWidth properties.
For example, if you want the NavigationView to be Minimal mode, you can try to set the properties:
<NavigationView CompactModeThresholdWidth="1920" ExpandedModeThresholdWidth="1920">
More details, you can look into the NavigationView display modes and Overriding the default adaptive behavior topic.
Related
I am writing a UWP 14393 app using mediaplayerelement in xaml file, I am wondering how can I display extra information in text on top of custom transport media control so that when player control is up, the text will show up at the same time?
For example, for a video player showing an online stream, and at the top left corner shows streamer name, view count, etc. The information only shows up when player control shows up.
Obviously, the best way to do this is to put the text inside custom transport media control, is it doable? If not, how can I achieve this?
I am a newbie at UWP, so any help will be welcome, thanks.
You can custom the MediaTransportControls's style, and add your own content to <Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">. See my test.
First download MediaTransportControls's style from my gist.
Or you can find it in your pc's generic.xaml file.
Then add this style to App.xaml.
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MediaTransportControls.xaml"/>
</ResourceDictionary.MergedDictionaries>
Then you can use your style in MediaTransportControls.
<MediaPlayerElement
Width="300" Height="500"
AreTransportControlsEnabled="True"
Source="ms-appx:///Assets/elephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary-srt_eng-srt_por-srt_swe.mkv">
<MediaPlayerElement.TransportControls>
<MediaTransportControls Style="{StaticResource myMediaTransportControlsStyle}">
</MediaTransportControls>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
<MediaPlayerElement AreTransportControlsEnabled="True">
<MediaPlayerElement.TransportControls>
<MediaTransportControls>
<Grid>
<...Put any content here like textblocks and buttons all this content will be part of controls so they will appear and disappear along with the controls, this Grid covers all the area on the screen ( above the controls bar )...>
</Grid>
</MediaTransportControls>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
I am trying to get a RichEditBox to take over the entire width of the app window and to be responsive to window resizing, so far the code I have is the following:
<RichEditBox HorizontalAlignment="Stretch"
TextWrapping="WrapWholeWords"
Height="250"
Name="Intro"/>
What I am getting from the code above is this:
Any ideas on how can I get this to work? Why is it that I tell the text to wrap and it doesn't follow?
UPDATE
I also tried this:
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
But the result is:
The problem that I am having is that it seems that HorizontalAlignment="Stretch" does not really do anything. The only way I am able to set a decent width is by hard-coding it, for example: Width="600". But if I do this my UI will not respond correctly to resizing. I also tried HorizontalContentAlingment="Stretch" but the result is exactly the same.
How can I get my RichEditBox take up all the available Width and Wrap at the same time?
If you look at the documentation of RichEditBox.TextWrapping, you'll notice that WrapWholeWords is invalid. You have to use
<RichEditBox TextWrapping="Wrap"/>
-or-
<RichEditBox TextWrapping="NoWrap"/>
Since Wrap is the default value, you can drop the property.
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
Edit: in reply to the updated question:
A control only takes the width of it's parent control. Some container controls (e.g. Grid) automatically take the full width available, while others (e.g. StackPanel) only take the required size of it's children. Using HorizontalAlignment="Stretch" in combination with a StackPanel as a parent control, will only use the MinWidth property instead of the full available width on your screen. Sometimes you can't directly see this issue, e.g. when your control is inside an itemtemplate of a ListView. Use the Live Visual Tree in Visual Studio to find the parent containers and locate the issue.
So in short: make sure your RichEditBox is inside a Grid (or similar control) instead of a StackPanel.
How to make CheckBox bigger on Windows 8 ?
I already know about LayoutTransform, but looks like there is not this property on Windows 8:
<CheckBox>
<CheckBox.LayoutTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</CheckBox.LayoutTransform>
</CheckBox>
Several ways:
You can increase the overall size by applying a render transform. This will double the height and width during rendering. It may not lay out as you want.
<CheckBox RenderTransformOrigin="0.5,0.5" >
<CheckBox.RenderTransform>
<CompositeTransform ScaleX="2" ScaleY="2"/>
</CheckBox.RenderTransform>
</CheckBox>
You can use a ViewBox, which will lay out in the same spot but won't give full control over the size
<Viewbox Height="100">
<CheckBox>
</CheckBox>
</Viewbox>
Or you can edit the template. This is the most code, but most will be generated for you if you select a checkbox in the designer, right click, and choose "Edit template...". It will provide the most control and you can completely swap out the Checkbox's elements. MSDN's Quickstart: Control templates demonstrates changing a Checkbox's template. Depending on the exact look you'll want you'll probably need to increase the sizes of all of the sub-elements (NormalRectangle, CheckGlyph, IndeterminateGlyph, FocusVisualWhite, and FocusVisualBlack).
I want to change width & height(scale) all grid,images,text automatically...when changing size a screens.
Higher screens then text or images are smaller...change in my app for different Screen Resolution and Screen size.
The SharedSizeGroup attribute when defining ColumnDefinition could be of some help here assuming you're using Grids. An MSDN article about it could be found here: http://msdn.microsoft.com/en-us/library/ms751905.aspx.
Alternatively, you could create some sort of cascading bindings using the likes of this: <TextBox Height="{Binding ElementName=SomeOtherControl, Path=ActualHeight}" />
I have a Canvas that overrides PointerMoved event do some stuff if the user "paints" on it. Now I'm trying to move this Canvas inside a ScrollViewer to add Zoom and Scroll effects which works perfectly.
<ScrollViewer x:Name="MainScrollViewer" Grid.Column="1"
VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"
ZoomMode="Enabled" MinZoomFactor="0.5" MaxZoomFactor="2.0" >
<Canvas x:Name="MainCanvas" Background="#000000"
HorizontalAlignment="Left" VerticalAlignment="Top"
PointerMoved="MainCanvas_PointerMoved" />
</ScrollViewer>
However, the ScrollViewer captures all the Pointer move Events and this caused the main paint procedure not working anymore.
Any idea on how to fix this?
Drawing with touch while still allowing zooming/panning - this is currently not supported in XAML. You will need to turn OFF zooming/panning in order to be able to draw with Pointer events and it is not possible to obtain system zooming and panning behaviors simultaneously with custom manipulations. You can however try to use Manipulation events by setting ManipulationMode=All and handle two finger scrolling and pinch zoom using Scale and Translate values manually.
See more at: Touch based drawing app with a Canvas inside a ScrollViewer
I didn't work with canvas and scrollview but I think which I found will help you :)
There is a trick! You can add a tool button (like hand) to switch in two conditions.
First condition enable drawing: you can disable HorizontalScrollMode and VerticalScrollMode of ScrollViewer which gives you ability to use pointer events of Canvas.
In second one you should enable the HorizontalScrollMode and VerticalScrollMode for ScrollViewer, and it works!
To change ScrollViewer properties programmatically:
MainScrollViewer.HorizontalScrollMode = ScrollMode.Auto;
MainScrollViewer.VerticalScrollMode = ScrollMode.Auto;
MainScrollViewer.ZoomMode = ZoomMode.Enabled;