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.
Related
Here is my Code:
<Grid>
<ScrollViewer Grid.Row="0" Grid.Column="1" HorizontalScrollBarVisibility="Disabled">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBox MinWidth="80" Name="tbTodoName" Margin="5, 2"/>
<Button Content="Add" Height="30" Margin="5, 0"/>
</StackPanel>
<ListBox Name="lstTodo" ItemsSource="{Binding}" BorderThickness="0" Padding="0" ItemTemplate="{StaticResource TodoTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Stretch">
</ListBox>
</StackPanel>
</ScrollViewer>
</Grid>
and here is a picture of what the program looks like:
As can be seen in the picture, a frame is displayed around the ListBox. I don't understand why, since I set BorderThickness and Padding = "0".
Can someone help me?
You have set a custom ItemTemplate, which is applied only to the items.
You will need to apply the Template as well:
<Grid>
<ScrollViewer Grid.Row="0" Grid.Column="1" HorizontalScrollBarVisibility="Disabled">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBox MinWidth="80" Name="tbTodoName" Margin="5, 2"/>
<Button Content="Add" Height="30" Margin="5, 0"/>
</StackPanel>
<ListBox Name="lstTodo" ItemsSource="{Binding}" BorderThickness="0" Padding="0" ItemTemplate="{StaticResource TodoTemplate}" Template={StaticResource ListBoxNoBorder}
ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Stretch">
</ListBox>
</StackPanel>
</ScrollViewer>
</Grid>
And in your resource dictionary:
<ControlTemplate x:Key="ListBoxNoBorder" TargetType="{x:Type ListBox}">
<Border BorderBrush="Transparent" BorderThickness="0">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
I got this xaml code:
<UserControl x:Class="CharacterMap.CharacterMapControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CharacterMap"
xmlns:cxml="clr-namespace:CharacterMap.Xml">
<UserControl.Resources>
<ResourceDictionary>
<Style x:Key="Flat">
<Setter Property="Control.Background" Value="White" />
<Setter Property="Control.FontWeight" Value="DemiBold" />
<Setter Property="Control.FontFamily" Value="Arial" />
</Style>
<DataTemplate x:Key="ItemsTemplate">
<Border BorderThickness="0,0,1,1" BorderBrush="Black">
<Button Width="26" Height="23" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Content="{Binding TheChar}"
Style="{StaticResource Flat}" BorderThickness="0"
ToolTipService.InitialShowDelay="800" ToolTipService.ShowDuration="10000" ToolTipService.BetweenShowDelay="300"
ToolTipService.ShowOnDisabled="True" ToolTip="{Binding AggregatedTooltip}" ToolTipService.IsEnabled="True" />
</Border>
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Border BorderBrush="{x:Null}" Height="25" Margin="10,0,20,0">
<TextBlock Text="Filtern nach Buchstabe: " TextWrapping="Wrap" VerticalAlignment="Center"/>
</Border>
<TextBox Text="{Binding FilterString, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="125" Height="25" VerticalContentAlignment="Center" />
</StackPanel>
<ScrollViewer x:Name="ScrollViewer" Margin="10,0,10,10" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" >
<Border BorderBrush="Black" BorderThickness="1,1,0,0" SnapsToDevicePixels="True" >
<ItemsControl ItemsSource="{Binding CharDescriptions}" ItemTemplate="{StaticResource ItemsTemplate}" Name="CharItemsControl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Border>
</ScrollViewer>
</Grid>
</UserControl>
It looks something like this:
Before i had the BorderThickness from the button just on 1 but then the borders were overlaying and it looked not so nice.
Now i tried to set the buttons borders thickness to "0,0,1,1" and put a border around the itemscontrol which is "1,1,0,0". The problem is that when i resize the window or in generall the border from the itemscontrol just extends too far and that doesn't look nice either.
How to achieve something like this: ?
You can do something like below. Essentially, you use negative margins to meld all the borders together. On a parent border set a Padding="1" so that the negative margins along the edges can be seen.
The Border around your Button in your DataTemplate would look like this:
<DataTemplate x:Key="ItemsTemplate">
<Border
Margin="-1,-1,0,0"
BorderBrush="Black"
BorderThickness="1">
<Button
Width="26"
Height="23"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
BorderThickness="0"
Content="{Binding TheChar}"
Style="{StaticResource Flat}"
ToolTip="{Binding AggregatedTooltip}"
ToolTipService.BetweenShowDelay="300"
ToolTipService.InitialShowDelay="800"
ToolTipService.IsEnabled="True"
ToolTipService.ShowDuration="10000"
ToolTipService.ShowOnDisabled="True" />
</Border>
</DataTemplate>
The Border around your ItemsControl in your ScrollViewer would have a Padding="1" and look like this:
<ScrollViewer x:Name="ScrollViewer"
Grid.Row="1"
Margin="10,0,10,10"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Border
Padding="1"
SnapsToDevicePixels="True">
<ItemsControl
Name="CharItemsControl"
ItemTemplate="{StaticResource ItemsTemplate}"
ItemsSource="{Binding CharDescriptions}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Border>
</ScrollViewer>
I would like to make the "Cartoon" below to be aligned to the right and the yellow part to fill all the space in the middle of my ListBox item.
However, all I can get is this:
Here is my layout xaml:
<Window x:Class="Cartoons.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Cartoons" Height="350" Width="525" SizeToContent="Width">
<DockPanel x:Name="mainPanel">
<Border Background="Green" DockPanel.Dock="Bottom" Width="Auto" Height="Auto">
<Grid Margin="2" Height="Auto">
<ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Stretch" Background="PowderBlue">
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" DockPanel.Dock="Left" >
<Image Source="<IMAGE_LOCATION>" Width="64" Height="64" Stretch="Fill"/>
</DockPanel>
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" DockPanel.Dock="Right">
<TextBlock Text="Cartoon" VerticalAlignment="Center"/>
</DockPanel>
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow">
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="Character 1"/>
<TextBlock Text="Walt Disney"/>
<TextBlock Text="Speedy Gonzales"/>
</StackPanel>
</DockPanel>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Border>
</DockPanel>
</Window>
I have tried many things but regardless what I do, it is alwasy displayed with large white space to the right.
Much appreciated,
If you're not avoiding hard-coding numbers in, such as margins, you could try this (tested in Visual Studio for your convenience):
<Border Background="Green" DockPanel.Dock="Bottom" Width="Auto" Height="Auto">
<Grid Margin="2" Height="Auto">
<ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
<ListBoxItem>
<!-- Width of the below element may have to be adjusted -->
<Grid HorizontalAlignment="Stretch" Width="499">
<Image Source="<IMAGE_LOCATION>" Width="64" Height="64" Stretch="Fill" HorizontalAlignment="Left"/>
<!-- Margin of the below element may have to be adjusted -->
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="Yellow" Margin="69,8,0,8">
<TextBlock Text="Character 1"/>
<TextBlock Text="Walt Disney"/>
<TextBlock Text="Speedy Gonzales"/>
</StackPanel>
<Label Background="AliceBlue" Content="Cartoon" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Right"/>
</Grid>
</ListBoxItem>
</ListBox>
</Grid>
</Border>
Also, there is an extra near the bottom of your XAML, above .
The problem is that the ListBox will generate container elements (of type ListBoxItem) for each item - these will, by default, align content to the left. To change that, add this to your ListBox:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
I figured it out.
Needed to set HorizontalContentAlignment="Stretch" on ListBox.
That resolved the issue. Just modify above line
<ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
to
<ListBox Name="listBoxCartoons" HorizontalContentAlignment="Stretch" SelectionChanged="ListBox_SelectionChanged">
and it worked.
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'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>