Develop Reference

TextBox does not stretch horizontally in UWP

The Blue Part is my textbox and red is my relative panel. The relative panel is placed in a list view
<ListView RelativePanel.Below="Line" Name="SubTasksListView" Margin="10,10,10,0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{x:Bind subtasks}" IsItemClickEnabled="True" ItemClick="ItemClick" ItemTemplate="{StaticResource SubTaskDataTemplate}"/>
<DataTemplate x:DataType="data:ZTask" x:Key="SubTaskDataTemplate">
<RelativePanel Margin="10,10,20,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Red" >
<TextBox Background="Aqua" BorderThickness="0,0,0,0" BorderBrush="#8888" HorizontalContentAlignment="Stretch" KeyDown="Box_KeyDown" RelativePanel.AlignLeftWithPanel="True" Name="SubTaskTitle" PlaceholderText="+ Subtask" FontSize="16" Margin="0"/>
<Line Name="Line" Stretch="Fill" Margin="10 0 0 0" Stroke="#8888" X2="1" Opacity="0.2" RelativePanel.Below="SubTaskTitle"/>
</RelativePanel>
</DataTemplate>
I have tried HorizontalAlignment="Stretch" and HorizontalContentAlignment="Stretch" but it doesn't work.Please Help me solve this issue

I believe, this is due the lack of exact alignment instructions, as Relative Panel is a bit conservative to minimize potential conflicts between inner elements and their layout desires. So, could you try to explicitly set both left and right alignment, like this:
... RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" ...
Upd: and yes, it seems in your case the layout could be simplified by using Grid element because there are too few inner controls (just two) so it's not an issue to position them.

Using Grid instead of relative panel worked for me
<Grid Margin="10,10,20,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox BorderThickness="0,0,0,0" BorderBrush="#8888" HorizontalContentAlignment="Stretch" KeyDown="Box_KeyDown" Name="SubTaskTitle" PlaceholderText="+ Subtask" FontSize="16" Margin="0"/>
<Line Name="Line" Stretch="Fill" Margin="10 0 0 0" Stroke="#8888" X2="1" Opacity="0.2" Grid.Row="1"/>
</Grid>
But I still am not able to figure out why it does not work with relative panel, Someone please post the answer using relative panel.

Zooming video in ScrollViewer - bad quality

Left:Zoomed in video (MediaElement). Right:Zoomed in picture. Same resolution. Different quality.
I want to zoom video.
It is easy with ScrollViewer and ZoomMode="true", but video is not zoom propertly (quality is worst). When I zoom snapshot from video, it is fine.
XAML code:
<Grid>
<!--Grid stuff-->
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" MinZoomFactor="1" ZoomMode="Enabled">
<MediaElement Source="Assets/gopro4k.mp4"/>
</ScrollViewer>
<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" MinZoomFactor="1" ZoomMode="Enabled">
<Image Source="Assets/gopro4k_00_00_03.jpg"/>
</ScrollViewer>
</Grid>
What can I do with this?

WPF WebBrowser MinHeight

It seems the WPF WebBrowser control has a builtin minimum height of 150.
You can set a height explicitly and it will comply but in a * layout it won't resize to less than 150.
Simplified my xaml looks like this (stripped colors, borders, etc.)
edit1: added ItemsControl (seems to cause this or is related to the problem, doesn't matter if the webbrowser loads a html file or not)
<ItemsControl>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<WebBrowser Grid.Row="0" Name="WebBrowserStartPage" Source="pack://siteoforigin:,,,/StartPage.html" />
<ListBox Grid.Row="1" />
</Grid>
</ItemsControl>
Setting MinHeight seems to be ignored.
It there any other way to set the minimum height for resizing?

After some more testing I found that setting the VerticalScrollBarVisibility to Disabled fixes that problem...
Maybe this helps someone who comes across this issue...
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
I still don't know why the WebBrowser stopped resizing at 150... Might be some magic Microsoft number?

Cannot scroll content horizontal in windows store app

In my application, I have a StackPanel with the Orientation set to 'horizontal'. In my StackPanel there are 4 Images. When I try to scroll this content horizontally, it only scrolls a few pixels and I cannot see the whole content. When I change the Orientation of my StackPanel to vertical, I can scroll my whole content vertical. Why it isn't possible to scroll it hotizontally? Any ideas how I can solve this problem?
<Grid>
<ScrollViewer>
<StackPanel Orientation="Horizontal" >
<Canvas Margin="120,0,0,0"
Width="310"
Height="390">
<Image Width="310"
Height="390"
Source="ms-appx:///Assets/Image/background_teaser.png"/>
</Canvas>
<Canvas Margin="120,0,0,0"
Width="310"
Height="390">
<Image Width="310"
Height="390"
Source="ms-appx:///Assets/Image/background_teaser.png"/>
</Canvas>
<Canvas Margin="120,0,0,0"
Width="310"
Height="390">
<Image Width="310"
Height="390"
Source="ms-appx:///Assets/Image/background_teaser.png"/>
</Canvas>
<Canvas Margin="120,0,0,0"
Width="310"
Height="390">
<Image Width="310"
Height="390"
Source="ms-appx:///Assets/Image/background_teaser.png"/>
</Canvas>
</StackPanel>
</ScrollViewer>
</Grid

Horizontal scrolling is not enabled per default.
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">

I had some issues working with Stackpanels in a ScrollViewer. Try wrapping the Stackpanel in another Grid.
And as the others have pointed out, you need to set the HorizontalScrollMode on your ScrollViewer

Frame on a resizable Window should show Scrollbar

My app has a resizable WPF window with a frame which shows different WPF pages. Most of the time the pages are bigger than the frame and if this is the case, the frame should display scrollbar(s). Unfortunately, it never shows any scrollbar.
Here is my code:
<Grid>
<Frame Name="MainFrame"
NavigationUIVisibility="Hidden"
Width="Auto"
Height="Auto"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</Grid>
Code behind:
MainFrame.Navigate(new Page1());
What did I do wrong?

Try wrapping your Frame in a ScrollViewer:
<Grid>
<ScrollViewer>
<Frame Name="MainFrame"
NavigationUIVisibility="Hidden"
Width="Auto"
Height="Auto"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ScrollViewer>
</Grid>

I had the same problem and I gave up and just set the Visibility to Visible. If it did not need the scrollbar then no real harm done.

Had the same problem, nothing worked. So I’ve used a workaround to solve it by adding scrollviewer to the target page
and setting page size to frame size
<Page x:Class="PageInFrame" Height="1050" Width="555" > …
<ScrollViewer x:Name="svScroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid x:Name="LayoutRoot" Height="1050" Width="555">
…..
</Grid>
</ScrollViewer>
Set/Replace page Height and Width property to target/containing frame size (can be done runtime or design time)