I have a custom WPF control to display a list of items using an ItemsControl. The ItemsPresenter is defined in the template to display the list and it is embedded inside a ScrollViewer for scrolling purposes:
<ControlTemplate TargetType="ItemsControl">
<Grid x:Name="LayoutRoot">
<ScrollViewer Margin="3">
<ItemsPresenter/>
</ScrollViewer>
</Grid>
</ControlTemplate>
My application creates two instances of the custom control to show the list side by side.
What I want is when user selects an item on the first one, the second control automatically scrolls so that the same item is displayed in the same position relative to the top. To accomplish this I need to know
How to get the position (in pixels) of the selected item in the first control?
How to scroll to the same position in the second control?
Are there any other ways to do this?
Related
I can't seem to figure out how I can stretch the items of my horizontal listview.
I have a list of items, and each one of those items contain a list of other items. Which means I have a list nested in another list. Since I want to display the items of the nested list horizontally, I have used StackPanel.
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
However it seems like it is not possible to stretch and make all the rectangles have the same width, while filling out the page, with StackPanel. Even with setting the HorizontalContentAlignment and HorizontalAlignment of the ListView to "Stretch". Is there a way to solve this problem? It seems like I should use Grid somehow, but since the list length of the nested list varies, I'm not sure.
Below is how it looks like, I just want the width of the rectangle to stretch and have the same width, filling out the empty space. The width of the rectangles should adjust if you make the app width bigger or smaller.
This is how I want it to look
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 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.
We have put a scroll viewer inside a content panel in design page of a databound app. We have to add more number of textblocks inside the scrollviewer which we cannot do by dragging and dropping from the toolbar as the design shows only three textblocks...
You can add the textboxes manually and specify it's margin. You don't need to drag and drop. For example:
<Grid x:Name="Content Panel">
<ScrollViewer>
<TextBox x:Name="textbox_1" Margin="10,0,0,0"/>
<TextBox x:Name="textbox_2" Margin="10,10,0,0"/>
<TextBox x:Name="textbox_3" Margin="10,20,0,0"/>
<TextBox x:Name="textbox_4" Margin="10,30,0,0"/>
..and so on.
Margin parameters are Left, Top, Right and Bottom. Keep increasing the top margin to push the control below.
I am automating a windows 8.1 store app using Coded UI test. I have a Imagebrush control where user image will be loaded on service call. The thing is I cannot identify this control using Coded UI Cross hair/Inspect.exe eventhough it have automation id supplied. But the Image control can be identified.
The below XAML have two border elements and within the 1st border element I am having Imagebrush control and in the next border element I am having image control. Here I can identify the Image control but the Imagebrush control cannot be identified. I tried hand coding also but it did not work.
<Border AutomationProperties.AutomationId="123" Tapped="MyProfile_Tapped">
<Border.Background>
<ImageBrush AutomationProperties.AutomationId="123_4" ImageSource="{Binding Profile.ProfilePhot....... />
</Border.Background>
</Border>
<Border AutomationProperties.AutomationId="1234_5">
<Image AutomationProperties.AutomationId="1234_6" Source="ms-appx:///Assets/Images/WatchAlbumLogo.png" />
</Border>