I have a Universal Windows Platform application.
I have a ScrollViewer which has a button on the top, a ListBox and a button below the ListBox (I know it is not a good practice to have a ListBox inside a ScrollViewer, but this is not my code and I can't modify the implementation).
The ScrollViewer's VerticalScrollMode and VerticalScrollBarVisibility are both set to false, so it is not possible to scroll vertically (this is also a requirement).
When the ListBox contains many items, the height of the list becomes bigger than the device height. As a result a part of the ListBox and the Buttons below the list are not available (as the vertical scroll is disabled).
<ScrollViewer>
<RelativeLayout>
...
<Button name="Button1">
...
</Button>
<ListBox MinHeight="120">
</ListBox>
<Button name="Button2">
...
</Button>
</RelativeLayout>
</ScrollViewer>
Is there a way to fix the ScrollViewer's height to be the device screen height? And fix the ListBox's height so that the ListBox's height grows only so that the ListBox fits on the space between the Button1 and Button2?
Your problem is not the scrollviewer's height. It is the listbox that expands to accomodate it's contents (as it should). By limiting the listbox's height you can take care of that.
You can use a grid with 3 rows. Something like this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button x:Name="ButtonTop" Grid.Row=0/>
<ListView x:Name="DontPutListViewInScrollViewer" Grid.Row=1/>
<Button x:Name="ButtonBottom" Grid.Row=2/>
</Grid>
Notice the Height defined in the middle row. That means that the listview will take all space that the top and bottom row leave available.
Then put this grid in the ScrollViewer.
Related
I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.
I have a UserControl that controls scrolling of a ListView, kind of like a custom ScrollBar. The issue occurs when:
An item in the ListView has keyboard focus (i.e. the focus visual is
set on the item)
I grab and drag my control
Make the release outside of the control (e.g. over the ListView)
Result is that the ListView item loses its focus in the same way it would if I had just clicked outside of the ListView. This is not the way a regular ScrollBar behaves and in fact if I have a Button in my control, click that and make the release outside of the control the Button somehow blocks the release event and the ListView item keeps its focus.
I've tried setting CapturePointer in the PointerPressed handler of my UserControl, but the item still loses focus (although the PointerReleased handler of the ListView isn't called).
UserControl:
<Grid x:Name="RootGrid" Background="AliceBlue">
<Button IsTabStop="False">OKOK</Button>
</Grid>
MainPage:
<Grid x:Name="RootGrid" Background="Gray">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ListView>
<TextBlock Text="ListViewItem 1" />
<TextBlock Text="ListViewItem 2" />
<TextBlock Text="ListViewItem 3" />
</ListView>
<local:MyControl Grid.Row="1" />
</Grid>
So in the above example:
Press tab so that an item in the ListView is marked with the black focus rectangle
Press the blue area with the mouse, drag to gray area and release
Notice how the black focus rectangle disappears. Repeat the steps above but press the Button instead of pressing the blue area and notice how the black focus rectangle doesn't disappear. I want the same behavior when dragging from the blue area as when dragging from the Button.
The basic hamburger menu using SplitView found in many examples is cool but I like the way Microsoft implemented it in some of their apps in Windows 10 such as News and Sports. The way they implemented it is when the SplitView.Pane is open, its height is not the same as the root frame's height. In other word, the Pane's height and Content's height is not the same. The benefit of this style is that full content of the pageheader of the SplitView.Content is visible. Can somebody help me out on how to achieve that effect since I am new to xaml. I hope my question is pretty clear to understand.
Thanks,
AB
On the official "sport"/"news" page, there are several elements: toggle button, SplitView and etc. In the SplitView, there are also several sub-items, such as panel and frame. There are lots of approaches to help you to get your own desired effect: you can use layout panel, such as StackPanel or Grid, to arrange those UI elements on the page; you can modify the splitview's default template; and you can also just customize frame and panel' height by setting their related properties, such as: height or Margin. For more instructions of UWP design please go here.
Below is a simple example by using Grid layout and adjusting "margin" property of splitview's frame. In this example, I put the toggled button and a back button on the page header (you can change the back button to a navigation bar later). Then adjust the "margin" property of the frame, so that it doesn't has the same height as the panel. You can get a complete sample of SplitView here.
<!-- Put the whole page content in a grid of 2*2 -->
<Grid>
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="BackButton"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Center"
TabIndex="2"
IsEnabled="{Binding AppFrame.CanGoBack, ElementName=Root}"
Width="{Binding ItemsPanelRoot.Width, ElementName=NavMenuList}"
Click="BackButton_Click"/>
<!-- Top-level navigation menu + app content
and put the SplitView in another row to leave space for page header -->
<SplitView x:Name="RootSplitView"
DisplayMode="Inline"
OpenPaneLength="256"
IsTabStop="False" Grid.Row="1" Grid.ColumnSpan="2">
<SplitView.Pane >
<!-- A custom ListView to display the items in the pane. The automation Name is set in the ContainerContentChanging event. -->
<controls:NavMenuListView x:Name="NavMenuList"
TabIndex="3"
ContainerContentChanging="NavMenuItemContainerContentChanging"
ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
ItemTemplate="{StaticResource NavMenuItemTemplate}"
ItemInvoked="NavMenuList_ItemInvoked">
</controls:NavMenuListView>
</SplitView.Pane>
<!-- Set Frame's margin property to differ from panel -->
<!-- OnNavigatingToPage we synchronize the selected item in the nav menu with the current page.
OnNavigatedToPage we move keyboard focus to the first item on the page after it's loaded. -->
<Frame x:Name="frame"
Navigating="OnNavigatingToPage"
Navigated="OnNavigatedToPage"
Margin="0,100,0,0" >
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<EntranceNavigationTransitionInfo/>
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Frame.ContentTransitions>
</Frame>
</SplitView>
<!-- Declared last to have it rendered above everything else, but it needs to be the first item in the tab sequence. -->
<ToggleButton x:Name="TogglePaneButton"
TabIndex="1"
Style="{StaticResource SplitViewTogglePaneButtonStyle}"
IsChecked="{Binding IsPaneOpen, ElementName=RootSplitView, Mode=TwoWay}"
Unchecked="TogglePaneButton_Checked"
AutomationProperties.Name="Menu"
ToolTipService.ToolTip="Menu" Grid.Row="0" Grid.Column="0" />
</Grid>
I'm facing two issues with the code following while I'm making a simple chat app.
The code shows a textblock at the top of the page and two textbox stack at the bottom. Plus a listbox which will be auto height to fill the remaining gap.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Height="1" Fill="White" VerticalAlignment="Top"/>
<TextBlock Text="Hello World!" Grid.Row="0" FontSize="36"/>
<Listbox Grid.Row="1"/>
<TextBox Grid.Row="2"/>
<TextBox Grid.Row="3"/>
</Grid>
When I click on one of the top textboxes, the SIP keyboard becomes visible and all content in the page is pushed up. The main issue here is that the top textblock disappears and hides over the top. How can I keep it on top and not moving while the SIP keyboard is viewed?
When the most bottom textbox has focus, the SIP keyboard appears and pushes all content up. In this case, the keyboard will just fit and be sticky to that textbox. However, when the other textbox has focus, the keyboard will make a gap between them. How can I make the keyboard behave as it does when the most bottom one is focused?
When the keyboard pops and unpops, a TranslateTransform runs on the PhoneApplicationFrame, translating the whole screen up and down.
Based on this article, you should be able to get the value of the translation. As you can observe an animation moves the Y property from zero to a specific negative value (based on the control you took focus on).
Option 1: I have not been able to write a descent way of handling this value but you should be able to resize your controls to fit in what's left of the screen.
Option 2.0 (bad): You can cancel or remove this animation. The keyboard will be on top of the screen without any movement. Your turn now to move/resize your controls to fit the remaining space.
public MainPage()
{
this.InitializeComponent();
PhoneApplicationFrame frame = (App.Current as App).RootFrame;
var group = (frame.RenderTransform as TransformGroup);
group.Children.RemoveAt(0); // remove translate transform
}
Option 2.1: There's an issue with 2.0: removing the transform will prevent you from being notified about the keyboard. Setting up a reverse animation on your page's child when the Y property changes will "kind of cancel" the original translation.
<Grid x:Name="LayoutRoot" Background="Transparent" VerticalAlignment="Stretch">
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform />
</TransformGroup>
</Grid.RenderTransform>
static void OnRootFrameTransformChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
{
// ... edit from the blog article ...
MainPage page = source as MainPage;
page.lb.Items.Add(newvalue);
var oppositeTransform = (TranslateTransform)((TransformGroup)page.RenderTransform).Children[0];
if (newvalue < 0.0)
{
page.IsSipVisibleGuess.IsChecked = true;
oppositeTransform.Y = -newvalue;
}
else if (newvalue == 0.0)
{
page.IsSipVisibleGuess.IsChecked = false;
oppositeTransform.Y = 0;
}
I'm sorry none of these options will magically solve the problem but it may help you code what fits best for your app.
If you find a better solution out of this, please post it as an answer.
I have a grid with 3 rows, in my top row (200px height) i want a text on a blue background. How do i specify that my textblock should fill the space? when i add it it only fits the space the text occupy. Tried with a ViewBox, but that resized the text also, i want that to be a fixed size...
anyone?
This code is an example of size autofill for 3 different controls in given grid in XAML. Autofill is default, so you don't need to set anything additional, just make sure margin is not set. I tested this solution in MS Expression Blend and it works OK.
<Grid Height="400" Width="250" Canvas.Left="100" Canvas.Top="20">
<Grid.RowDefinitions>
<RowDefinition Height="200*"/>
<RowDefinition Height="100*"/>
<RowDefinition Height="100*"/>
</Grid.RowDefinitions>
<Button Content="Button"/>
<CheckBox Content="CheckBox" Grid.Row="2"/>
<TextBlock Grid.Row="1" Text="Test Text block" TextWrapping="Wrap"/>
</Grid>
Just remove these four properties from the xaml if they are set when TextBlock is defined, or set them to the default values:
HorizontalAlignment (Defaults to Stretch)
VerticalAlignment (Defaults to Stretch)
Width (Default to Auto)
Height (Default to Auto)
Your TextBlock should now auto stretch and fit the row.
Also make sure that your Grid is also wide enough or is set to fit your Window. Your Grid's width might also be the culprit.