How can I display an itemsCount for Expander content - wpf

I have spent wayyyy too much time on this, so if someone can help point me in the right direction, I would be very appreciative.
I have an Expander with a ListBox in it. I have bound the ListBox to a List ie FilteredProjects. I would like the Header of the expander to reflect the number of items in the displayed list. I did implement INotifyPropertyChanged for ProjectsCount, and the ItemsSource for the ListBox updates just fine. Thanks in advance for your time.
<Expander>
<Expander.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Projects" />
<Border CornerRadius="4" Padding="0" BorderThickness="1" BorderBrush="Black" Background="#FF545F42" Margin="1,0,0,0" >
<Label Content="{Binding Path=ProjectsCount, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource filter}}" Padding="0" FontSize="8" FontStyle="Italic"></Label>
</Border>
</StackPanel>
</DataTemplate>
</Expander.HeaderTemplate>
<ListBox x:Name="ProjectsFilterListView" Opacity="1" ItemsSource="{Binding FilteredProjects}" >
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" Content="{Binding ItemName}" Margin="10,10,0,10"></CheckBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Expander>

You could just get the Item Count directly from the ListBox
<Label Content="{Binding Path=Items.Count, ElementName=ProjectsFilterListView}" />
Here is an example of it working, I replaced Label for TextBlock so I could use StringFormat to add "Items:" text before the number as I am not sure what your Converter is doing
<StackPanel Orientation="Horizontal">
<TextBlock Text="Projects" />
<Border CornerRadius="4" Padding="0" BorderThickness="1" BorderBrush="Black" Background="Red" Margin="1,0,0,0" >
<TextBlock Text="{Binding Path=Items.Count, ElementName=ProjectsFilterListView, StringFormat={} Items: {0}}" Padding="0" FontSize="10" FontStyle="Italic" Foreground="Black"/>
</Border>
</StackPanel>
Result:

Related

How to implement auto-Vertical-Scrollbar in a ListView with Datatemplate?

I want to insert this template into a ListView and have the scrollbar apear when I overflow my MaxHeight.
I dont know if it's the ControlTemplate or the DataTemplate or whatever.
DataBinding works though.
I would realy appreciate hints and help
<ListView Grid.Row="8"
Grid.Column="2"
Margin="5,5,5,5"
HorizontalContentAlignment="Stretch"
MaxHeight="110"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="auto"
ItemsSource="{Binding Linie_Erholungsweg_Typen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListView.Template>
<ControlTemplate>
<Border
CornerRadius="4"
BorderThickness="1"
BorderBrush="#333333"
Background="White"
>
<ItemsPresenter></ItemsPresenter>
</Border>
</ControlTemplate>
</ListView.Template>
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Text="{Binding Typ}" FontWeight="Bold" />
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
A solution could be adding a ScrollViewer to your ListView Template:
<ListView.Template>
<ControlTemplate>
<Border CornerRadius="4" BorderThickness="1" BorderBrush="#333333" Background="White">
<ScrollViewer>
<ItemsPresenter></ItemsPresenter>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListView.Template>
If you have StackPanel wrapping your listView. Like in this example.
It will not work! Just change it to Grid, for example, and than it will work.
<StackPanel>
<ListView Grid.Row="1" ItemsSource="{Binding Path=DictationVMs}" ScrollViewer.VerticalScrollBarVisibility="Visible"
Focusable="True" SelectedValue="{Binding Path=SelectedDictation,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}">
<ListView.Template>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter VerticalAlignment="Stretch"></ItemsPresenter>
</ScrollViewer>
</ControlTemplate>
</ListView.Template>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DictationModel.Name}" HorizontalAlignment="Center"
VerticalAlignment="Center" FontSize="24" TextWrapping="Wrap"/>
</DataTemplate>
</ListView.ItemTemplate>
</StackPanel>
You need to add a "ScrollViewer" as a parent of the objects you want to scroll, try this:
<DataTemplate>
<ScrollViewer>
<WrapPanel>
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Text="{Binding Typ}" FontWeight="Bold" />
</WrapPanel>
</ScrollViewer>
</DataTemplate>

How can I wrap a custom text?

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 :) )

Can I use a DataTemplate for toolbar buttons and still make the name meaningful?

I have a Toolbar whose ItemSource is a collection of toolbarItems which contain the bitmap text and other info for the button and the xaml includes a DataTemplate to bind the data to the button.
Our app now needs to become 508 compliant and when I run the Accessible Event Watcher it is listing all the toolbar button names as "Unknown".
Can someone tell me how to provide a meaningful name to the buttons?
Here's the portion of xaml applying to this issue:
<ToolBar.ItemTemplate>
<DataTemplate DataType="{x:Type src:toolBarItem}">
<DataTemplate.Resources>
<src:toolBarItemConverter x:Key="buttonConverter" />
<src:booleanToVisibilityConverter x:Key="boolToVisibilityConverter" />
<src:toolBarButtonFormatConverter x:Key="toolBarFormatDisplayConverter" />
<src:stringToVisibilityConverter x:Key="stringToVisibilityDisplayConverter" />
</DataTemplate.Resources>
<StackPanel Orientation="Horizontal">
<Border Style="{StaticResource SeparatorStyle}" Visibility="{Binding menuSeparator, Converter={StaticResource boolToVisibilityConverter}}"/>
<Button x:Name="listButton" Height="{Binding menuHeight, Mode=OneWay}" Width="{Binding menuWidth}" VerticalAlignment="Top" HorizontalAlignment="Center" Visibility="{Binding isActiveButton, Converter={StaticResource boolToVisibilityConverter}}" Tag="{Binding}"
ToolTip="{Binding menuTooltip}" IsEnabled="{Binding isEnabled}" >
<UniformGrid VerticalAlignment="Center" HorizontalAlignment="Center" Rows="{Binding menuText,Converter={StaticResource toolBarFormatDisplayConverter}}" >
<!-- button image -->
<Image Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding menuImage, Converter={StaticResource buttonConverter}}"/>
<!-- button name -->
<Viewbox StretchDirection="DownOnly" HorizontalAlignment="Center" VerticalAlignment="Bottom" Visibility="{Binding menuText, Converter={StaticResource stringToVisibilityDisplayConverter}}" >
<TextBlock x:Name="buttonName" FontFamily="Segoe UI" Width="{Binding menuWidth}" FontSize="12" Grid.Row="1" TextAlignment="Center" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="{Binding menuText}" Foreground="Black" />
</Viewbox>
</UniformGrid>
<!-- </StackPanel> -->
</Button>
</StackPanel>
</DataTemplate>
</ToolBar.ItemTemplate>
Thanks,
Ron
OK we figured this out. Need to simply bind your names to the AutomationProperties.Name
<Button x:Name="listButton" AutomationProperties.Name="{Binding menuText}"
Height="{Binding menuHeight, Mode=OneWay}" Width="{Binding menuWidth}"
VerticalAlignment="Top" HorizontalAlignment="Center"
Visibility="{Binding isActiveButton,
Converter={StaticResource boolToVisibilityConverter}}"
Tag="{Binding}" ToolTip="{Binding menuTooltip}" IsEnabled="{Binding isEnabled}" >

Why must I move a Popup outside of a control to have databinding work?

I have this XAML:
<ContentControl Micro:View.Model="{Binding ChildViewModel}">
<Popup x:Name="TestPopup" Placement="Mouse" AllowsTransparency="True">
<Border x:Name="border" Background="White" Padding="5" CornerRadius="10" BorderThickness="2" BorderBrush="Black" >
<StackPanel Orientation="Vertical">
<TextBlock x:Name="MainInfos" Text="{Binding MainInfos}" />
<TextBlock x:Name="AltInfos" Text="{Binding AltInfos}" />
<TextBlock x:Name="OtherInfos" Text="{Binding OtherInfos}" />
<TextBlock x:Name="CanNotUseFieldInfos" Foreground="Red" Text="{Binding CanNotUseFieldInfos}" />
</StackPanel>
</Border>
</Popup>
</ContentControl>
When I update the values of the properties of the datacontext, the textblocks are not updated.
If I move Popup outside of ContentControl like so:
<Popup x:Name="TestPopup" Placement="Mouse" AllowsTransparency="True">
<Border x:Name="border" Background="White" Padding="5" CornerRadius="10" BorderThickness="2" BorderBrush="Black" >
<StackPanel Orientation="Vertical">
<TextBlock x:Name="MainInfos" Text="{Binding MainInfos}" />
<TextBlock x:Name="AltInfos" Text="{Binding AltInfos}" />
<TextBlock x:Name="OtherInfos" Text="{Binding OtherInfos}" />
<TextBlock x:Name="CanNotUseFieldInfos" Foreground="Red" Text="{Binding CanNotUseFieldInfos}" />
</StackPanel>
</Border>
</Popup>
<ContentControl Micro:View.Model="{Binding ChildViewModel}" PreviewMouseMove="Canvas_PreviewMouseMove" MouseEnter="myCanvas_MouseEnter" MouseLeave="myCanvas_MouseLeave" d:LayoutOverrides="Width, Margin" />
It works.
Could someone explain me why? Is it possible to make the first XAML work?
Thanks in advance
Cannot reproduce any weird behavior from just wrapping a Popup in a ContentControl, i suspect the Micro:View.Model attached property changes the DataContext of the ContentControl.

How can I make a ListBox expand to fit the entire available width?

I need to make the ListBox expand to fit the width it has available. Here's the XAML:
<ListBox Grid.Row="2" Height="400" ItemsSource="{StaticResource Notes}" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="90" Margin="5">
<TextBlock Text="{Binding Title}" FontSize="30" />
<TextBlock Text="{Binding Text}" FontSize="15" />
<Rectangle Fill="#1192D4" Height="2" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Please take a look at this post
A ListBoxItem that fills its parent

Resources