How could one accomplish behavior in which a header of a ListView or GridView group doesn't scroll with the content, but stays fixed until the content comes to an end and the following header then comes in focus.
The behavior can be observed in Finance app on Windows 8 Release Preview when you scroll through GridView items.
I am not expecting the whole code, but I'd like to hear some ideas, links, code snippets, samples etc. which would help me get started.
Thanks
You might be able to embed a listview in a datatemplate of the main listview. Then you can embed a gridview and gridviewcolumns in the templated listviews and get your column headers that way.
Wrap the ListView in a ScrollViewer. The ListView's internal SrollViewer won't be used, and you'll have control of the outer ScrollViewer, which will allow you to set its TopHeader.
<ScrollViewer>
<ScrollViewer.TopHeader>
... Your header content here ...
</ScrollViewer.TopHeader>
<ListView HorizontalAlignment="Left" VerticalAlignment="Top">
... Your body content here ...
</ListView>
</ScrollViewer>
Related
We were able to understand if ItemsControl finished it's rendering by checking Status within StatusChanged event in WPF.
How can I make sure that ItemsControl finished rendering in UWP? I want to make sure that rendering is completed and access some elements using ContainerFromItem.
I have custom dragging logic using events like ManipulationDelta. After rendering, I want to get the ContentPresenter's position based on it's parent UIElement and then use that position to draw some stuff using Win2D. I need item's position, so I need the container, so I need to make sure containers are rendered in the first place, and it goes like that.
To use ItemsControl in UWP, you also need to know about the UI virtualization. The ItemsControl uses UI virtualization. It means that not all items will be rendered at the same time, instead only the viewable area.
You could try the following code:
<ItemsControl x:Name="item">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Loaded="Grid_Loaded">
<TextBlock Text="{Binding}"></TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I registered the Loaded event for the 'Grid' which is included in every item.
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.
I am creating a UWP application and I want a simple check box, no text, for each entry in my ListView. If I add a checkbox control to my template for the listview, I get a big gap after the checkbox for the Content - event when the content is empty.
If I turn on multiselect in the listview so I get a nice checkbox for each row, I can't seem to figure out how to databind the check box for each row in the listview to the Selected property of my ViewModel.
Below is a picture of what I want the area of the check box to look like. This was generated using the SelectionMode="Multiple" on the listview. Remember - the problem with this approach is I can't seem to find a way to bind the check box to the Selected property of my ViewModel class.
Below is what it looks like if I remove the SeletionMode property and add a check box to my ItemTemplate. As you can see there is a huge gap between the check box and the area where the image will be due to the Checkbox control's minimum width of 120.
Any suggestions would be greatly appreciated.
You could just set the MinWidth on the Checkbox itself
eg
<StackPanel Orientation="Horizontal">
<CheckBox x:Name="MyCheck" IsChecked="True" MinWidth="30"/>
<Rectangle Fill="Red" Width="100" Height="50"/>
</StackPanel>
The alternative is creating a copy of the Checkbox Styles and Template but that seems like overkill here.
So I have come to that point where I am saying to myself over and over again I am missing some basic stuff.
I have a ScrollViewer with a RichTextBlock that converts HTML to the content.
Everything shows up as expected but I can't scroll! I had the VerticalScrollBarVisibility to Hidden but I have taken that out. After seeing this anwsear in StackOverflow I have stoped with the following code:
<ScrollViewer VerticalAlignment="Stretch"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Auto"
ZoomMode="Disabled"
Padding="52"
Background="#60000000" >
<RichTextBlock rtbx:Properties.Html="{Binding TextHTML}"
TextAlignment="Justify"
FontSize="20" />
</ScrollViewer>
It also seems that the PanningMode is not avaiable in Windows 8 but I belive that it is still the expected behaviour to scroll with the touch.
I have tried to put the ManipulationMode to All in the ScrollViewer and also tried to set to none in the RichTextBlock. However, I got no sucess with those approaches.
Removing the manipulation modes and isolating the problem and simplifing the "options" I was using led me to the conclusion that the ScrollViewer wasn't the issue.
The problem was: I had was a Control that was on top of the ScrollViewer that was hidden (opacity = 0). This Control swallowed all the events that I was needing in the ScrollViewer. Basic mistake.
I had to put the Visibility equals to Collapsed.