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>
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 am trying to display emoji list when user clicks on some button. I have given the emoji list in Popup.
<Grid ClipToBounds="True" Visibility="Collapsed" VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2" Background="Transparent" HorizontalAlignment="Stretch">
<Popup AllowsTransparency="True" ClipToBounds="True" Grid.Column="0" HorizontalOffset="0" VerticalOffset="1" HorizontalAlignment="Right" Placement="RelativePoint" materialDesign:ShadowAssist.ShadowDepth="Depth0" VerticalAlignment="Center">
<materialDesign:Card VerticalAlignment="Bottom" HorizontalAlignment="Right" UniformCornerRadius="0" Visibility="Visible" materialDesign:ShadowAssist.ShadowDepth="Depth1">
<Border Background="White" BorderBrush="#d2d9d4" BorderThickness="0.6" ClipToBounds="True">
<Grid>
<ListView ItemsSource="{Binding EmojisList}" MaxWidth="350" MaxHeight="450" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
VerticalContentAlignment="Stretch">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<emoji:TextBlock FontSize="25" Text="{Binding .}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Border>
</materialDesign:Card>
</Popup>
</Grid>
With the following code, I am getting the popup as following.
this is how the popup is displaying, actually it should be inside the mainwindow. Please let me how to achieve this.
I an using a Scrollviewer with an ItemsControl in it.
the VerticalScrollBarVisibility of the Scrollviewer is set to "Auto".
the problem is that when the scrollbar appears it shifts the contents of the ItemsControl horizontally.
Is there a way that the scroll bar will just be "over" the contents with out moving them?
the code looks something like this
<ScrollViewer VerticalScrollBarVisibility="Auto" CanContentScroll="True" SnapsToDevicePixels="True">
<ItemsControl ItemsSource="{Binding Summaries}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" IsItemsHost="True" CanVerticallyScroll="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="15,5,10,5" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".166*"></ColumnDefinition>
<ColumnDefinition Width=".166*"></ColumnDefinition>
<ColumnDefinition Width=".166*"></ColumnDefinition>
<ColumnDefinition Width=".166*"></ColumnDefinition>
<ColumnDefinition Width=".166*"></ColumnDefinition>
<ColumnDefinition Width=".166*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Label Grid.Column="1" Content="{Binding A}" HorizontalContentAlignment="Center"/>
<Label Grid.Column="2" Content="{Binding B}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Grid.Column="3" Content="{Binding C}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Grid.Column="4" Content="{Binding D}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Grid.Column="5" Content="{Binding E}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl></ScrollViewer>
Thanks
here is a trick I used recently in my project:
ItemsControl.Width is obtained from ScrollViewer.ActualWidth via OneWay binding:
<ScrollViewer VerticalScrollBarVisibility="Auto" CanContentScroll="True"
Name="scroller"
SnapsToDevicePixels="True">
<ItemsControl ItemsSource="{Binding Summaries}"
Width="{Binding Path=ActualWidth, ElementName=scroller, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" IsItemsHost="True" CanVerticallyScroll="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<UniformGrid Columns="6" Margin="15,5,10,5" HorizontalAlignment="Stretch">
<Label Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Label Content="{Binding A}" HorizontalContentAlignment="Center"/>
<Label Content="{Binding B}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Content="{Binding C}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Content="{Binding D}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Content="{Binding E}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
</UniformGrid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
also consider using of UniformGrid
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.
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>
.....