If I have a Horizontal StackPanel with many elements, with different margin between them:
Is there any difference if I give each element a left margin or
is there some advantage giving every second element a right and left margin - that way only one element gets its margin property set.
<StackPanel Orientation="Horizontal">
<TextBlock Name="textblock1" />
<TextBlock Name="textblock2" Margin="5,0,0,0" />
<TextBlock Name="textblock3" Margin="10,0,0,0" />
...
</StackPanel>
or
<StackPanel Orientation="Horizontal">
<TextBlock Name="textblock1" />
<TextBlock Name="textblock2" Margin="5,0,10,0" />
<TextBlock Name="textblock3" />
...
</StackPanel>
I was just wondering if there was a best-practise concerning this.
If the Margin is the same for every element, you can factor it out in a style:
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="TextBlock>
<Setter Property="Margin" Value="5,0,0,0" />
</Style>
</StackPanel.Resources>
<TextBlock Name="textblock1" />
<TextBlock Name="textblock2" />
<TextBlock Name="textblock3" />
...
</StackPanel>
Other than that it makes no difference.
Related
I am using MaterialDesignInXAML for a WPF application. I have a PopupBox that I want to change the icon for. Currently it defaults to DotsVertical and I would like to have it as a DotsHorizontal.
I tried the following with no luck.
<materialDesign:PopupBox PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
<materialDesign:PopupBox.Content>
<materialDesign:PackIcon Kind="DotsHorizontal" />
</materialDesign:PopupBox.Content>
<StackPanel>
<TextBlock Text="Test1" />
<TextBlock Text="Test2" />
<TextBlock Text="Test3" />
</StackPanel>
</materialDesign:PopupBox>
Thanks in advance!
Figured it out and will leave an answer here in case anyone else comes across this issue. There is a property called ToggleContent
<materialDesign:PopupBox PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
<materialDesign:PopupBox.ToggleContent>
<materialDesign:PackIcon Kind="DotsHorizontal" />
</materialDesign:PopupBox.ToggleContent>
<StackPanel>
<TextBlock Text="Test1" />
<TextBlock Text="Test2" />
<TextBlock Text="Test3" />
</StackPanel>
</materialDesign:PopupBox>
In order to change the Icon and preserve the current style use this:
<materialDesign:PopupBox PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
<materialDesign:PopupBox.ToggleContent>
<materialDesign:PackIcon Kind="DotsHorizontal"
Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=materialDesign:PopupBox}, Path=Foreground}" />
</materialDesign:PopupBox.ToggleContent>
<StackPanel>
<TextBlock Text="Test1" />
<TextBlock Text="Test2" />
<TextBlock Text="Test3" />
</StackPanel>
</materialDesign:PopupBox>
I'm having a problem styling my ListBox selection background.
I used ListView originally, it was less problematic with styling but moving this to Silverlight app, I found out that it doesn't have ListView so I just used ListBox.
I want my app to be easily ported in Silverlight and also in Windows Phone so I used ListBox and now am having a trouble with the style.
My Metro app has Dark theme and I have custom ListBoxItem but am not sure why when I clicked on it, it looks like this
originally when using ListView, it looks like this
adding background color in my custom ItemsTemplate make it look this
How do I get rid of that White background and also restyle the item when hovered because it looks like this
this my XAML for listbox so far
<ListBox Grid.Row="3" Name="lvSubmeters" VerticalAlignment="Top" HorizontalAlignment="Stretch" SelectedItem="{Binding Path=SelectedListViewItem, Mode=TwoWay}" SelectedIndex="{Binding Path=SelectedListViewIndex, Mode=TwoWay}" ItemTemplate="{StaticResource SubmeterItems}" ItemsSource="{Binding Path=Store.AllItems}" Background="{x:Null}" Foreground="White">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="0" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
and also if you want my custom ItemsTemplate
<DataTemplate x:Name="SubmeterItems">
<Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="5,5,5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="166"/>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding MeterID}" FontSize="24" FontWeight="Bold" Foreground="#FF429AA3" />
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding Fullname}" FontSize="16" />
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Height="95">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text=" " FontSize="24" FontWeight="Bold" Foreground="#FF429AA3" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="29*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Grid.Column="0" VerticalAlignment="Top" Text="Last Reading:" FontSize="14" Margin="0,0,5,5" />
<TextBlock Grid.Column="0" VerticalAlignment="Top" Text="New Reading:" FontSize="14" Margin="0,0,5,5" />
<TextBlock Grid.Column="0" VerticalAlignment="Top" Text="KW/H Used:" FontSize="14" Margin="0,0,5,5" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding LastReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold" />
<TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding NewReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold" />
<TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding KwHUsed}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold" />
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Grid.Column="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="Black">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding KwhUsedAmount}" FontSize="20" FontWeight="Bold" Foreground="Red" TextAlignment="Right" Margin="0,0,5,0" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="+" FontSize="20" Foreground="#99FF0000" TextAlignment="Right" Margin="0,0,5,0"/>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding AdditionalCharges}" FontSize="20" Foreground="#99FF0000" TextAlignment="Right" Margin="0,0,5,0"/>
</StackPanel>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding TotalAmount}" FontSize="34" FontWeight="Bold" Foreground="Green" TextAlignment="Right" Margin="0,0,5,0" />
</StackPanel>
</Grid>
</DataTemplate>
I tried taking this to Blend 4 but I can't find the way to do it.
It looks to me like your screenshots from above don't quite match the XAML that you've provided, however I think I can answer your questions.
For the white border around each item - From the way that the border changes to Purple when the item is selected, you can tell that it is part of the ItemContainer (because that is what gets selected). The ItemContainer will contain the Content of each ListBoxItem. The Content is rendered using the DataTemple (or ItemTemplate property). In your DataTemplate, you have a margin of 5 around the topmost grid, meaning that when the Content is rendered using that DataTemplate, there will be a margin around the outside of the content. That seems to be what you're getting with your white border around each item, so I'm pretty sure that's what is going on. Get rid of the margin in the top most grid of the DataTemplate, and the white border will be gone. If this isn't correct, please provide more complete XAML example (including the parent XAML element of the Listbox) because the xaml above, on its own, does not yield a white border when the Window background is Black.
Changing the colors/style of the ListBoxItem is pretty easy, and there are several ways to do it. The easiest way (in my opinion) is to add a trigger to the ItemContainerStyle that adjusts the background color on MouseOver. Here is a simple example, extending your existing ItemContainerStyle (triggers can be much more advanced, if you wish):
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="5" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
Hope that helps.
I have a listbox that uses datatemplates and one of the elements in the template is a textblock. Problem is that the words won't wrap, and I don't want to set a fixed size. Anybody that knows how to resolve this problem? It's driving me crazy!
<ListBox Grid.Row=" 1" HorizontalContentAlignment="Stretch" Background="#24221f" ItemsSource="{Binding Messages}" ScrollViewer.VerticalScrollBarVisibility="Visible" ClipToBounds="False" BorderBrush="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate >
<Border BorderBrush="#24221f" BorderThickness="3" Width=" auto">
<DockPanel Background="{StaticResource blackBackground}" HorizontalAlignment="Stretch" Width="auto">
<Border BorderThickness="3" BorderBrush="Transparent">
<Image Source="{Binding IconImageUrl}" VerticalAlignment="top" Height="22" Width ="22" DockPanel.Dock="Left" />
</Border>
<Border BorderThickness="3" BorderBrush="LightGray" Height="auto" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" DockPanel.Dock="Left">
<Image Source="{Binding ProfileImageUrl}" VerticalAlignment="Top" HorizontalAlignment="Left" Height="48" Width ="48" />
</Border>
<StackPanel Orientation="Vertical" DockPanel.Dock="Left" Margin="5,0,0,0">
<Label Content="{Binding Path=Sender}" Foreground="#feb41c" FontFamily="Verdana" FontWeight="Bold" FontSize="14" />
<TextBlock Width="100" Text="{Binding Path=ShortMessage}" Margin="10,0,0,0" Foreground="BlanchedAlmond" TextWrapping="Wrap" FontFamily="Verdana" />
<Label Content="{Binding Path=Time}" Margin="10,0,0,0" Foreground="DarkGray" FontFamily="Verdana" FontStyle="Italic"/>
</StackPanel>
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
StackPanel is Evil :=) when i have strange behaviours in a xaml which include StackPanel, switching to a Grid with right parameters ( fixed sized, or stars or "Auto" ) often fix the issue.
Note also that there is an error in your xaml since you set the DockPanel.Dock of your first image (IconImageUrl) whereas it is in the border that surrrounds it that you should be setting it. That may get the Layout to do strange things.
just try with HorizontalContentAlignment property to "Stretch" of ListBoxItems using the Style
<Style TargetType="{x:Type ListBoxItem}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
and also disable the HorizontalScrollBar visibility
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Update
<Window.Resources>
<SolidColorBrush x:Key="blackBackground" Color="Black"/>
<Style TargetType="{x:Type ListBoxItem}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</Window.Resources>
<Grid>
<ListBox Grid.Row=" 1" HorizontalContentAlignment="Stretch" Background="#24221f" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding Messages}" ScrollViewer.VerticalScrollBarVisibility="Visible" ClipToBounds="False" BorderBrush="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate >
<Border BorderBrush="#24221f" BorderThickness="3" Width=" auto">
<DockPanel Background="{StaticResource blackBackground}" HorizontalAlignment="Stretch" Width="auto">
<Border BorderThickness="3" BorderBrush="Transparent">
<Image Source="{Binding IconImageUrl}" VerticalAlignment="top" Height="22" Width ="22" DockPanel.Dock="Left" />
</Border>
<Border BorderThickness="3" BorderBrush="LightGray" Height="auto" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" DockPanel.Dock="Left">
<Image Source="{Binding ProfileImageUrl}" VerticalAlignment="Top" HorizontalAlignment="Left" Height="48" Width ="48" />
</Border>
<StackPanel Orientation="Vertical" DockPanel.Dock="Left" Margin="5,0,0,0">
<Label Content="{Binding Path=Sender}" Foreground="#feb41c" FontFamily="Verdana" FontWeight="Bold" FontSize="14" />
<TextBlock Text="{Binding Path=ShortMessage}" Margin="10,0,0,0" Foreground="BlanchedAlmond" TextWrapping="Wrap" FontFamily="Verdana" />
<Label Content="{Binding Path=Time}" Margin="10,0,0,0" Foreground="DarkGray" FontFamily="Verdana" FontStyle="Italic"/>
</StackPanel>
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I think this thread answer's your question, see the accespted answer by "Nash" - Force TextBlock to wrap in WPF ListBox
( and remember to upvote the answer the the linked thread if it helps you :) )
I created user control with the textblock. But it will not wrap. This user control servers as a listboxitem.
<Grid x:Name="MainGrid" Height="Auto" Width="Auto">
<StackPanel Orientation="Horizontal">
<Image Height="50" Width="100" Stretch="Uniform" Name="image1" Source="{Binding Path=VideoImageUrl}" Margin="12,12,13,84" MouseLeftButtonDown="image1_MouseLeftButtonDown" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" />
<StackPanel Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Height="Auto" HorizontalAlignment="Left" Name="titleTextBox"
Text="{Binding Path=Title, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" FontSize="14" FontWeight="SemiBold" />
<StackPanel Orientation="Vertical" x:Name="StackPanelDetails">
<TextBlock Height="Auto" HorizontalAlignment="Left" Name="desciptionTextBox"
TextWrapping="Wrap"
Text="{Binding Path=Desciption, Mode=OneWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" />
<Line />
<ItemsControl x:Name="CustomItemsSource" ItemsSource="{Binding Path=LinksList}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink NavigateUri="{Binding Path=TopicUrl}" RequestNavigate="Hyperlink_RequestNavigate" >
<TextBlock Text="{Binding Path=TopicName}" />
</Hyperlink>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
A ListBox's default template does not automatically limit the width of its items, but instead uses a ScrollViewer, which shows a horizontal scrollbar when an item is wider than the ListBox.
You can remove the ScrollViewer by replacing the ListBox's Template:
<ListBox ...>
<ListBox.Template>
<ControlTemplate>
<StackPanel IsItemsHost="True"/>
</ControlTemplate>
</ListBox.Template>
...
</ListBox>
Another important thing to note is that a StackPanel in the top-level Grid won't properly resize the contained elements. In the following simplified example the text in the TextBlock is not wrapped because the containing StackPanel simply does not resize it as you expect:
<Grid>
<StackPanel Orientation="Horizontal">
<Image ... />
<Text TextWrapping="Wrap" Text=... />
</StackPanel>
</Grid>
This way it works as you expect:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image ... />
<TextBlock Grid.Column="1" TextWrapping="Wrap" Text=... />
</Grid>
In WPF,
how do I spread/stretch content over an area (a wide horizontal area)?
Like this:
Here's my current code (from the upper part of the picture):
<Grid Width="900">
<ScrollViewer x:Name="sclScroller" HorizontalScrollBarVisibility="Hidden">
<Viewbox HorizontalAlignment="Stretch">
<DockPanel>
<TextBlock Name="txtContent1" Text="1" />
<TextBlock Name="txtContent2" Text="2" />
<TextBlock Name="txtContent3" Text="3" />
<TextBlock Name="txtContent4" Text="4" />
<TextBlock Name="txtContent5" Text="5" />
<TextBlock Name="txtContent6" Text="6" />
<TextBlock Name="txtContent7" Text="7" />
<TextBlock Name="txtContent8" Text="8" />
</DockPanel>
</Viewbox>
</ScrollViewer>
</Grid>
Using a uniform grid you can do something like that.
<UniformGrid Rows="1" Columns="8">
<UniformGrid.Resources>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
</Style>
</UniformGrid.Resources>
<TextBlock Name="txtContent1" Text="1" />
<TextBlock Name="txtContent2" Text="2" />
<TextBlock Name="txtContent3" Text="3" />
<TextBlock Name="txtContent4" Text="4" />
<TextBlock Name="txtContent5" Text="5" />
<TextBlock Name="txtContent6" Text="6" />
<TextBlock Name="txtContent7" Text="7" />
<TextBlock Name="txtContent8" Text="8" />
</UniformGrid>