WrapPanel Horizontal orientation doesn't work - wpf

With new version of kinect not exist the old kinectScrollviewer so i have used a ScrollViewer with a listView of images. The problem is the unscrollable when hidden ScrollbarVisibility or with horizontal scroll and if i use a SelectionChanged it works fine with mouse, but if i use a hand gesture after first click the selection area not disappear and so i don't select the elements
I would scroll only horizontal (so i have disabled vertical), but also with your code doesn't scroll with gesture. Also the click doesn't works.
If i use orientation="Vertical" it's scroll vertical (although in the example scroll horizontal using this setting), but if i use orientation="Horizontal" it doesn't works :(
<k:KinectRegion x:Name="ChoiceExercise" Background="Black" >
<DockPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<k:KinectUserViewer Grid.Row="0" Height="100"/>
<ContentControl Grid.Row="1" x:Name="navigationRegion">
<Grid x:Name="kinectGrid">
<ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" k:KinectRegion.IsScrollInertiaEnabled="True">
<ListView Grid.Row="0" x:Name="listViewExercise" SelectionChanged="listViewExercise_SelectionChanged" BorderThickness="0" Background="Black" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel VerticalAlignment="Center" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</ScrollViewer>
</Grid>
</ContentControl>
</Grid>
</DockPanel>
</k:KinectRegion>

ListView already contains ScrollViewer as part of default template and it's this behaviour that you need to disable by setting attached ScrollViewer.VerticalScrollBarVisibility property to Disabled
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<k:KinectUserViewer Grid.Row="0" Height="100"/>
<ContentControl Grid.Row="1" x:Name="navigationRegion">
<Grid x:Name="kinectGrid">
<ListView
Grid.Row="0"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
x:Name="listViewExercise"
SelectionChanged="listViewExercise_SelectionChanged"
BorderThickness="0"
Background="Black" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel VerticalAlignment="Center" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</ContentControl>
</Grid>
Also WrapPanel with horizontal orientation is meant to stack items horizontally until item cannot fit then move to the next row. Since you you want to scroll horizontally I think horizontal StackPanel would suit you better.
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>

Related

How can I keep the size after switching to full screen mode in WPF?

I only have the following so far
<Grid>
<DockPanel Background="Red">
<DataGrid DockPanel.Dock="Bottom" Height="357"/>
<StackPanel Background="Gray" DockPanel.Dock="Top" />
</DockPanel>
</Grid>
I want this layout to be retained when the program is enlarged;
and not like it is now when I make it big:
How can i make this?
Is it that, what you have wanted? By default the DockPanel.LastChildFill property is set to true. So if you enlarge the window, StackPanel in your case was enlarged.
<Grid>
<DockPanel Background="Red">
<StackPanel Background="Gray" MinHeight="75" DockPanel.Dock="Top" />
<DataGrid DockPanel.Dock="Bottom"/>
</DockPanel>
</Grid>
Take a look at grids, you can specify the height of the first row to 357 if you wish but Auto will just adjust to the contents on that row for you. * means fill the remaining space of the grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"/>
<DataGrid Grid.Row="1"/>
</Grid>

WPF - Set initial size of DataGrid within ItemsControl

I Have multiple DataTable's shown via DataGrid:
<ScrollViewer VerticalScrollBarVisibility="Visible">
<ItemsControl ItemsSource="{Binding Path = Data}" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="auto" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DataGrid Height="auto" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" ItemsSource="{Binding}">
</DataGrid>
<GridSplitter Grid.Row="0" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Is there an option to limit the initial size to parent's height, or a part of him (for example 50%), and make it resizable (height) by user ?
You are binding Data property to your ItemsControl. The same can go to the Height. Create public property and bind it to Height in view.
<RowDefinition Height="{Binding MyHeightProperty}" />

WrapPanel not wrapping content

I have the following xaml code in a user control.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" MinWidth="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" x:Name="scEmails">
<ItemsControl Focusable="False" ItemTemplate="{StaticResource UserDataTemplate}">
<ItemsControl.Items>
<system:String>123</system:String>
<system:String>123</system:String>
<system:String>123</system:String>
<system:String>123</system:String>
<system:String>12eee3</system:String>
<system:String>123eee</system:String>
<system:String>123fefef</system:String>
</ItemsControl.Items>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
<TextBox Grid.Column="1" TextWrapping="NoWrap" Margin="0,0,0,0" VerticalAlignment="Center" PreviewKeyDown="txtAuto_PreviewKeyDown" MinWidth="50" />
</Grid>
Here I have a set of items to be shown in the left of a text box. The rendering requirement is:
If there are no or little items, let the items occupy as many as space they needed.
If there are too many, the items should wrap to next line and expand the Height of the control, to ensure the text box get 50 or more pixels width, unless this is impossible (i.e. there is a single item that will use too much space)
If there are too many lines (i.e. exceed the limit set by MaxHeight property), show the vertical scroll bar.
In any cases, the text box shall be given all the space left (in the right hand side!).
I use a ScrollViewer to fulfill #3, and use a WrapPanel to fulfill #2. But the code above does not give the desired result. In design mode it looks like (the item template is a TextBlock inside a Border, should'nt matter here)
It is not fulfill the requirement because it is not wrapping.
What can I do to fix?
Update
If I apply the code in the answer by Raviraj Palvankar and removed all items, the layout in design mode is the following
However, the desired output (according to requirement term #4) is
Where my original code does properly (although fails other requirements)
Here is your code without the ItemTemplate and hence looking like that. I added more strings to show that it does wrap.
<Grid Grid.Column="1" Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" MinWidth="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" x:Name="scEmails">
<ItemsControl Focusable="False" >
<ItemsControl.Items>
<system:String>123</system:String>
<system:String>123</system:String>
<system:String>123</system:String>
<system:String>123</system:String>
<system:String>12eee3</system:String>
<system:String>123eee</system:String>
<system:String>123fefef</system:String>
<system:String>123</system:String>
<system:String>123</system:String>
<system:String>123</system:String>
<system:String>123</system:String>
<system:String>12eee3</system:String>
<system:String>123eee</system:String>
<system:String>123fefef</system:String>
</ItemsControl.Items>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
<TextBox Grid.Column="1" TextWrapping="NoWrap" Margin="0,0,0,0" VerticalAlignment="Center" PreviewKeyDown="txtAuto_PreviewKeyDown" MinWidth="50" />

Set background image to each ListBox ItemsPanel in WP7.1

Hi i am new in windows mobile development.
I need to Set background image to each ListBox ItemsPanel.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Issues" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<rlb:PullDownToRefreshPanel
x:Name="refreshPanel"
RefreshRequested="refreshPanel_RefreshRequested"
Grid.Row="2" />
<rlb:ReorderListBox FlowDirection="LeftToRight"
x:Name="allIssuesItemsListBox"
ItemsSource="{Binding All_xp_issue}"
Margin="12, 0, 12, 0"
ItemTemplate="{StaticResource IssuesItemTemplate}"
SelectionChanged="allIssuesItemsListBox_SelectionChanged"
IsReorderEnabled="{Binding IsChecked, ElementName=enableReorderCheckbox}"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel HorizontalAlignment="Center">
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</rlb:ReorderListBox>
</Grid>
</Grid>
Till now i designed page in which items are warped using toolkit:WrapPanel.
Now for each panel i want to set an background image. Means if there are two items in one panel than for both items i want to set one background image.
Thanks in advance.
You can set background of toolkit:WrapPanel with an image brush
create a image brush in resources.
<ImageBrush ImageSource="/images/YourImage.jpg" x:Key="BackgroundBrush" />
Use the imagebrush as toolkit:WrapPanel background
<toolkit:WrapPanel Background="{DynamicResource BackgroundBrush}"></toolkit:WrapPanel>

Silverlight - Expander Control with ListBox, 100% Height

Im trying to put 4 expander controls inside a Grid with 4 rows, the expander control contains a Grid and a ListBox (Currently holding some sample data).
Ideally when an expander is expanded I want it to fill all the available space without pushing the remaining expanders off the screen or the list box going off the screen. Can anyone think of a way of adapting the XAML below or updating the XAML below to achieve this?
<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource ExpanderData}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.246*"/>
<RowDefinition Height="0.754*"/>
</Grid.RowDefinitions>
<Grid Margin="0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.275*"/>
<ColumnDefinition Width="0.725*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<toolkit:Expander x:Name="Expander1" Header="One" IsExpanded="False">
<Grid Background="#FFE5E5E5">
<ListBox Margin="0" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}"/>
</Grid>
</toolkit:Expander>
<toolkit:Expander x:Name="Expander2" Header="Two" IsExpanded="True" VerticalAlignment="Top" Grid.Row="1">
<Grid Background="#FFE5E5E5">
<ListBox Margin="0" ItemTemplate="{StaticResource ItemTemplate1}" ItemsSource="{Binding Collection}"/>
</Grid>
</toolkit:Expander>
<toolkit:Expander x:Name="Expander3" Header="Three" VerticalAlignment="Top" Grid.Row="2" IsExpanded="False">
<Grid Background="#FFE5E5E5">
<ListBox Margin="0" ItemTemplate="{StaticResource ItemTemplate2}" ItemsSource="{Binding Collection}"/>
</Grid>
</toolkit:Expander>
<toolkit:Expander x:Name="Expander4" Header="Four" VerticalAlignment="Top" Grid.Row="3" IsExpanded="False">
<Grid Background="#FFE5E5E5">
<ListBox Margin="0" ItemTemplate="{StaticResource ItemTemplate3}" ItemsSource="{Binding Collection}"/>
</Grid>
</toolkit:Expander>
</Grid>
</Grid>
</Grid>
</Grid>
</UserControl>
I'd probably use a DockPanel instead of a Grid - for Silverlight you'll have to get it from the Silverlight Toolkit (http://silverlight.codeplex.com) - I know you already have it, I'm just referencing it for the archives. Uncheck the "LastChildFill" property and dock all the children to Top.
It's tough to test without adequate data, but what if you just had one Expander open at a time and set the MaxHeight of each Expander to the remaining available space?

Resources