I have a nested ItemsControl. My data structure is an ObservableCollection of Campaigns which consist of a Campaign class and an observableCollection of Data counts (total, assigned, unassigned, closed). What I need is the following:
CAMPAIGN.NAME
TOTAL UNASSIGNED ASSIGNED CLOSED
CAMPAIGN.NAME
TOTAL UNASSIGNED ASSIGNED CLOSED
I am able to get the first part of this, but for some reason it will not honor the orientation for the second ItemsControl. What am I missing? My XAML is:
<ItemsControl x:Name="icCampaignChicklets" ItemsSource="{Binding CampChicks}" Grid.Row="1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="gridContent">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Name="CampaignHeader" Height="20" Text="{Binding Path=Campaign.Name}" Grid.Row="1" VerticalAlignment="Top" TextWrapping="Wrap" HorizontalAlignment="Left" />
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="10">
<ItemsControl x:Name="icChicklets" ItemsSource="{Binding Path=Data}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="150" Height="140" Background="{Binding Background}" Cursor="Hand"
MouseLeftButtonDown="Chicklet_MouseLeftButtonDown"
>
<Grid x:Name="gridContent" Margin="8,4">
<TextBlock Text="{Binding Caption}" Foreground="White" FontSize="17" />
<TextBlock Text="{Binding CountCaption, Mode=OneWay}" Foreground="White" FontSize="45" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="7" />
<TextBlock Text="Ú" Foreground="#99ffffff" FontSize="30" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="3,5" FontFamily="Wingdings 3" />
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
If you want to change the orientation of the contents of an ItemsControl, set its ItemsPanel property like so:
<ItemsControl
...attributes...
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Wrapping it in a horizontally-oriented parent StackPanel will merely arrange it and its siblings horizontally, but in this particular case it has no siblings.
Related
**Tried adding wrap panel as parent, as child, as item template parent, but didn't work
**
<UserControl.Resources>
<DataTemplate x:Key="CredentialTemplate" DataType="{x:Type local:Credentials}">
<WrapPanel Width="800" Orientation="Horizontal">
<Grid Background="Red" Width="160" Height="160">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding FileName}" FontWeight="Bold" Margin="0,0,10,0"/>
<Button Grid.Row="1" Grid.Column="0" x:Name="btnCopyUsername" Tag="{Binding Button}" Content="Copy Username" Click="OnCopyUsernameButtonClicked" Margin="10"/>
<Button Grid.Row="1" Grid.Column="1" x:Name="btnCopyPassword" Tag="{Binding Button}" Content="Copy Password" Click="OnCopyPasswordButtonClicked" Margin="10"/>
<Button Grid.Row="2" Grid.Column="0" x:Name="btnEdit" Tag="{Binding Button}" Content="Edit" Click="OnEditButtonClicked" Margin="10"/>
<Button Grid.Row="2" Grid.Column="1" x:Name="btnCopyBoth" Tag="{Binding Button}" Content="Copy Both" Click="OnCopyBothButtonClicked" Margin="10"/>
</Grid>
</WrapPanel>
</DataTemplate>
</UserControl.Resources>
<WrapPanel Width="900" Background="Yellow">
<ListBox ItemsSource="{Binding Credentials}" ItemTemplate="{StaticResource CredentialTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Background="Green" Margin="10"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</WrapPanel>
</UserControl>
It might be the grid control that not letting wrap, normally without item template it should work
Screenshot
I explored this issue with a simplified version of your markup.
I don't have a credentials class, but what's in the grids doesn't matter.
My markup has less wrappanels:
<Grid>
<Grid.Resources>
<DataTemplate x:Key="CredentialTemplate">
<Grid Background="Red" Width="40" Height="40">
</Grid>
</DataTemplate>
</Grid.Resources>
<ListBox ItemsSource="{Binding Points}"
ItemTemplate="{StaticResource CredentialTemplate}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"
Background="Green" Margin="10"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
I've got 30 Points in my viewmodel.
My grid is smaller
Wraps ok:
I have a list of buttons being generated from data, so there are a variable number of buttons. In an old version of the software I am overhauling, they used random custom controls but the result was that there was an infinitely growing horizontal scroller.
It appears I have the exact same XAML but it's not aligning each item horizontally, only vertically
<ScrollViewer Background="#33FFFFFF" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" >
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding Events}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Margin="10" HorizontalAlignment="Stretch" Background="#FF1B1B1B" BorderThickness="5" BorderBrush="White" Command="{Binding Source={StaticResource Locator}, Path=EventSelector.ViewEventCommand}" CommandParameter="{Binding }">
<Grid Name="tileGridButton" Height="600" Width="400" Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Name="tileImageBorder" Margin="5" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Center">
<Image Name="tileImage" Margin="0" Source="{Binding ImageURL}"/>
</Border>
<Grid Grid.Row="1" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="6*"></RowDefinition>
<RowDefinition Height="4*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Name="tileText" Margin="5" Foreground="White" TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" FontSize="30" FontWeight="Bold" Text="{Binding Title}" />
<TextBlock Grid.Row="1" Name="tileDescription" Margin="5" Foreground="White" TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" FontSize="25" FontWeight="Bold" Text="{Binding EventTimeBegin}" />
</Grid>
</Grid>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
First of all your StackPanel is pretty much useless because it only contains a single item, the ItemsControl.
Instead you need to change your ItemsControl so that it uses a StackPanel as its method of laying out items inside the ItemsControl...
<ItemsControl ...>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
<ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
.....
i have xaml layout as shown below
<DockPanel Grid.Row="1" Grid.ColumnSpan="2">
<dxca:CarouselItemsControl x:Name="carouselItemsControl" ItemsSource="{Binding ImageList}" DockPanel.Dock="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<dxca:CarouselPanel x:Name="carousel" AttractorPointIndex="2" IsRepeat="True" PathSizingMode="Proportional" FirstVisibleItemIndex="0" Height="Auto" ItemSize="180,120" IsAutoSizeItem="True" VisibleItemCount="5" ActiveItemIndex="1" AnimationTime="500" IsInvertedDirection="True" PathVisible="False">
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Image Source="{Binding Data.Data}" Width="480" Height="320" Margin="10"/>
<TextBlock Canvas.Left="100" Canvas.Top="10" Text="{Binding Identifier}" FontSize="12" FontWeight="Bold"></TextBlock>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</dxca:CarouselItemsControl>
<dxca:CarouselNavigator DockPanel.Dock="Bottom" Carousel="< TODO : BINDING EXPRESSION TO BIND TO CarouselPanel>" Width="300" Height="40" />
</DockPanel>
How do i bind the CarouselNavigator to the carousel object in the carousel property using xaml only?
Just use the CarouselItemsControl.Carousel property for this purpose:
<dxca:CarouselNavigator Carousel="{Binding Path=Carousel, ElementName=carouselItemsControl}" />
I'm new to wpf and have what I hope is a simple question.
I have created a simple template to display some grouped items
Currently when I click on one of the items ItemsClick is called (as expected)
private void itemGridView_ItemClick(object sender, ItemClickEventArgs e)
{
MyCustomClass selectedItem = (MyCustomClass)e.ClickedItem;
GridView g = (GridView)sender;
I can get a copy of the class object by casting e.ClickedItem and the grid from sender. But what I don't see is how to I get a reference to the custom items I added in the template for example if I wanted to change the text in the testName TextBlock ?
Template:
<DataTemplate x:Key="MyTestTemplate">
<Grid HorizontalAlignment="Left" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Grid.RowSpan="3">
<Image Source="{Binding ThumbnailUrl}" Stretch="Fill" Width="175" Height="175" />
</Border>
<Image Source="{Binding MyCustomImage}" Height="30" Width="30" Grid.RowSpan="3" Margin="0,0,0,30"/>
<Grid x:Name="ItemDetails" VerticalAlignment="Bottom" Height="75" Margin="0,0,0,2" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="testName" Text="{Binding Name}" Grid.Row="0" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" MaxWidth="100" MaxHeight="80" TextWrapping="Wrap" HorizontalAlignment="Left" Style="{StaticResource TitleTextStyle}" Margin="5,0,5,0"/>
<TextBlock Text="{Binding Address}" Grid.Row="0" HorizontalAlignment="Right" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource
CaptionTextStyle}" TextWrapping="NoWrap" Margin="5,0,5,0" />
</Grid>
</Grid>
</DataTemplate>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource MyTestTemplate}"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="True"
RightTapped="itemGridView_RightTapped"
ItemClick="itemGridView_ItemClick" SelectionChanged="itemGridView_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding state}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Ok I found the answer on msdn.
The link here http://msdn.microsoft.com/en-us/library/bb613579.aspx
The basic steps
get the selected item (I was responding to click so this info was easy), find the ContentPresenter within that Item, and then call FindName on the DataTemplate that is set on that ContentPresenter.
I'm having an issue making a popup notification panel take only the amount of space it's inner controls require.
What I've Got:
<Grid>
<DockPanel Panel.ZIndex="1111" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" Visibility="{Binding MessageVisibility}">
<Button Visibility="Collapsed" Name="clickButton" Command="{Binding Path=CloseMessage}"/>
<Border Background="LightGray" CornerRadius="20" MouseDown="Border_MouseDown" BorderThickness="8" BorderBrush="CadetBlue">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20px">
<ItemsControl Grid.Column="0" Grid.Row="0" ItemsSource="{Binding Messages}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock TextBlock.TextAlignment="Center" Text="{Binding FallbackValue='Message'}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Border>
</DockPanel>
<DockPanel Panel.ZIndex="0">
...
</DockPanel>
</Grid>
I'm trying to make the first DockPanel only take up the space required by the ItemsControl. It seems to be taking the whole space. Setting a Width/Heigh will keep it in the center but it will not let it grow.
Changing from DockPanel to Stackpanel and setting Hor/Vert alignment center worked.
The below modified code might be helpful and solve your pro
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitions/>
</Grid.ColumnDefinitions>
<DockPanel Panel.ZIndex="1111" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" Visibility="{Binding MessageVisibility}">
<Button Visibility="Collapsed" Name="clickButton" Command="{Binding Path=CloseMessage}"/>
<Border Background="LightGray" CornerRadius="20" MouseDown="Border_MouseDown" BorderThickness="8" BorderBrush="CadetBlue">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20px">
<ItemsControl Grid.Column="0" Grid.Row="0" ItemsSource="{Binding Messages}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock TextBlock.TextAlignment="Center" Text="{Binding FallbackValue='Message'}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Border>
</DockPanel>
<DockPanel Panel.ZIndex="0" Grid.Column="0" Grid.Row="1">
...
</DockPanel>
</Grid>