I am trying to create a WPF application where I have a StackPanel that shows a list of accounts. There is an Account object in the code behind for each account, stored in a List structure. I want to databind this to my WPF, but I don't want a listbox.
Instead, I defined a template for how each account summary should appear. I then want to stack these in a StackPanel and call it a day.
The problem is that the Data Binding only takes the first item from the list and that's it. How to I bind it so that this effectively creates a little stacked list of nicely formatted chunks of data?
Here is the relevant WPF code:
<StackPanel Name="sp_AccountList" Margin="0,0,0,0" VerticalAlignment="Top">
<StackPanel.Resources>
<svc:AccountBalanceColorConverter x:Key="accountColorConverter" />
<Style x:Key="AccountSummaryBackgroundGradient" TargetType="{x:Type StackPanel}">
<!-- nice formatting code here -->
</Style>
<Style x:Key="AccountSummaryNameStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Padding" Value="10,0,0,0" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Height" Value="20" />
<Setter Property="FontFamily" Value="Cambria" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="Transparent" />
</Style>
<Style x:Key="AccountSummaryBalanceStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Padding" Value="10,0,0,0" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Height" Value="20" />
<Setter Property="FontFamily" Value="Cambria" />
<Setter Property="Background" Value="Transparent" />
</Style>
<ObjectDataProvider x:Key="accounts"
ObjectType="{x:Type svc:AccountService}"
MethodName="ListAccounts" />
<DataTemplate x:Key="AccountSummaryLayout">
<StackPanel Orientation="Vertical" Style="{StaticResource AccountSummaryBackgroundGradient}">
<TextBlock Text="{Binding Path=Name}" Style="{StaticResource AccountSummaryNameStyle}" />
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="{Binding Path=TotalAccountBalance, Converter={StaticResource accountColorConverter} }" Text="{Binding Path=TotalAccountBalance, Mode=OneWay}" Style="{StaticResource AccountSummaryBalanceStyle}" />
<TextBlock Foreground="{Binding Path=AvailableAccountBalance, Converter={StaticResource accountColorConverter} }" Text="{Binding Path=AvailableAccountBalance, Mode=OneWay}" Style="{StaticResource AccountSummaryBalanceStyle}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</StackPanel.Resources>
<StackPanel Orientation="Vertical">
<ContentPresenter x:Name="AccountSummaryPresenter" ContentTemplate="{StaticResource AccountSummaryLayout}" Content="{DynamicResource accounts}" />
</StackPanel>
</StackPanel>
StackPanel does not have an ItemsSource property, its children controls are not databindable.
What you can do is create an ItemsControl which uses a StackPanel as its Itemshost.
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Source={StaticResource accounts}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
...
</ItemsControl.ItemTemplate>
</ItemsControl>
<ScrollViewer>
Related
I have a
<DockPanel>
<!-- Header -->
<Button DockPanel.Dock="Top" Command="{Binding CreateAccountCommand}" Margin="{StaticResource ControlMargin}" Style="{StaticResource IconButtonStyle}">
<StackPanel>
<MahAppsIconPacks:PackIconFontAwesome Kind="Pencil" />
<TextBlock>create account</TextBlock>
</StackPanel>
</Button>
<!-- Accounts list -->
<ListView SelectionMode="Single" SelectedIndex="0" ItemsSource="{Binding AccountViewModels}" SelectedItem="{Binding SelectedItem}" Style="{StaticResource AccountsList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<LocalViews:AccountView Margin="{StaticResource ControlMargin}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</DockPanel>
It renders with a black separator on top of it, which is quite ugly. How do I hide it? I have tried setting different styles, but there is no ListViewColumnHeader.
In the live tree it shows as header content ... not separator, my bad. How do I remove it?
This doesn't work:
<Style TargetType="ListView" x:Key="AccountsList" BasedOn="{StaticResource {x:Type ListView}}">
<Style.Resources>
<Style TargetType="HeaderedContentControl">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</Style.Resources>
</Style>
Are you using any of the View capabilities of ListView? (e.g. GridView etc which I believe is the default. In which case, the separator is probably the header section, but empty). If you're not, try just using a ListBox instead. It has no header as default.
Edit: I just checked this theory, but it appears I can't reproduce your issue at all. Here's a ListBox as you've got your code (and a ListView for good measure):
<Window.Resources>
<x:Array x:Key="Items" Type="sys:String">
<sys:String>Item 1</sys:String>
<sys:String>Item 2</sys:String>
<sys:String>Item 3</sys:String>
</x:Array>
</Window.Resources>
<StackPanel Margin="20">
<TextBlock Text="ListBox:"/>
<ListBox Height="100" ItemsSource="{StaticResource Items}" BorderBrush="Transparent">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
<TextBlock Text="ListView:"/>
<ListView Height="100" ItemsSource="{StaticResource Items}" BorderBrush="Transparent">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</StackPanel>
It may be the different themes on Windows 7 however, I'm using Windows 10.
I believe this is a result of the MahApps template. It's not the default behaviour of a standard WPF ListView.
You would have to adjust the MahApps template to get rid of it.
Something like this:
<Style TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListView}}">
<Setter Property="BorderThickness" Value="0" />
</Style>
The MahApps code and resources are all open source. I think the particular problem you are having is driven by the BorderThickness setter here:
https://github.com/MahApps/MahApps.Metro/blob/develop/src/MahApps.Metro/MahApps.Metro/Styles/Controls.ListView.xaml
<Style x:Key="MetroListView" TargetType="{x:Type ListView}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="AlternationCount" Value="2" />
<Setter Property="Background" Value="{DynamicResource WhiteBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource BlackBrush}" />
<Setter Property="BorderThickness" Value="0 1 0 0" />
I download a sample code from here
http://www.codeproject.com/Articles/28306/Working-with-Checkboxes-in-the-WPF-TreeView
The sample code works fine. My questions is that I want to make this part of xaml into C# code.
<Window.Resources>
<ResourceDictionary>
<!-- Load this specific theme because the Aero theme for CheckBox has issues. -->
<Style x:Key="TreeViewItemStyle" TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="True" />
<Setter Property="IsSelected" Value="{Binding IsInitiallySelected, Mode=OneTime}" />
<Setter Property="KeyboardNavigation.AcceptsReturn" Value="True" />
<Setter Property="dw:VirtualToggleButton.IsVirtualToggleButton" Value="True" />
<Setter Property="dw:VirtualToggleButton.IsChecked" Value="{Binding IsChecked}" />
</Style>
<HierarchicalDataTemplate
x:Key="CheckBoxItemTemplate"
ItemsSource="{Binding Children, Mode=OneTime}"
>
<StackPanel Orientation="Horizontal">
<!-- These elements are bound to a FooViewModel object. -->
<CheckBox
Focusable="False"
IsChecked="{Binding IsChecked}"
VerticalAlignment="Center"
/>
<ContentPresenter
Content="{Binding Name, Mode=OneTime}"
Margin="2,0"
/>
</StackPanel>
</HierarchicalDataTemplate>
</ResourceDictionary>
</Window.Resources>
Can anyone tell me how to do that?
Thanks,
I'm using the WPF Toolkit for a .Net 4.0 application written in C#. I have a Chart containing a Column Series bound to a dictionary. The chart works fine but I'd like to show the actual value of each column, either in a textbox below each column, in the middle of each column, or on top of each column. I've been searching for a while and haven't been able to find any information on this. I set up a style for the chart as well as the ColumnSeries, but have not made any progress yet. Any suggestions?
My Chart xaml is:
xmlns:DV="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
...
<Page.Resources>
<Style x:Key="MyChart" TargetType="DVC:Chart">
<Setter Property="PlotAreaStyle">
<Setter.Value>
<Style TargetType="Grid">
<Setter Property="Background" Value="#FF2D2D30" />
</Style>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NoLegend" TargetType="DV:Legend">
<Setter Property="Visibility" Value="Hidden" />
<Setter Property="Width" Value="0" />
</Style>
<Style x:Key="ColumnSeriesStyle" TargetType="{x:Type DVC:ColumnSeries}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DVC:ColumnSeries}">
<Canvas x:Name="PlotArea" Visibility="Visible">
<TextBox Text="{Binding Path=Value.Value}" IsReadOnly="True"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
...
<DVC:Chart Name="TempChart" Style="{StaticResource MyChart}" LegendStyle="{StaticResource NoLegend}">
<DVC:Chart.Series>
<DVC:ColumnSeries IndependentValueBinding="{Binding Path=Value.Value}"
DepdendentValueBinding="{Binding Path=Value.Value}"
ToolTip="{Binding Path=Value.Value}"
Style="{StaticResource ColumnSeriesStyle}">
<DVC:ColumnSeries.DependentRangeAxis>
<DVC:LinearAxis x:Name="TempYAxis"
</DVC:ColumnSeries.DependentRangeAxis>
</DVC:Chart.Series>
</DVC:Chart>
I managed to style my ColumnSeries with this:
<Style x:Key="ColumnSeriesStyle" TargetType="{x:Type DVC:ColumnSeries}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DVC:ColumnSeries}">
<Canvas x:Name="PlotArea" Visibility="Visible">
<!-- Actual Values -->
<ListBox x:Name="ActualValueListBox" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
Background="{StaticResource WindowBackground}" Foreground="#FFBB702F" BorderBrush="#FF2D2D30" ItemsSource="{Binding}" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" FontSize="12"
Foreground="{StaticResource ValueForeground}" Background="{StaticResource ValueBackground}" Width="40"
Text="{Binding Path=Value.Value}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Height="20"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DVC:ColumnSeries}}, Path=ActualWidth}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
i have some listbox, which has this applied style:
<Style x:Key="GroupListBoxItemStyle"
TargetType="ListBoxItem">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="FontSize"
Value="11" />
<Setter Property="FontWeight"
Value="Bold" />
<Setter Property="Width"
Value="95" />
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<SlidingBar:SlidingBarRadioButton GroupName="PermissionsRadioButtonGroup"
IsChecked="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent},BindsDirectlyToSource=True,Mode=TwoWay}"
Text="{Binding Converter={StaticResource resourceStringToResourceConverter}}"
ImageSource="{Binding Converter={StaticResource PermissionTypeToImageConverter}}"
Margin="1"
/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Is there possible to show somehow these items in two rows?
You should do this in the ListBox ItemTemplate property. The XAML looks something like this:
<ListBox Width="300" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Line1}" />
<TextBlock Text="{Binding Line2}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The resulting listbox should look like:
Of course you don't have to use a StackPanel, you can use whatever kind of layout you like in the data template. Be creative :)
I am new to styles and need help to create a style for a ListBoxItem that will give the item a transparent background then have the Font turn Gold when hovered over. It should not change the color when clicked and return to normal when the mouse moves off. It must still pass the selected object to the PreviewMouseRightButtonDown event for the ListBox
I currently use a default dictionary from REUXABLES THEMES, but it is way to much coloring for this portion of the display on the application.
Thanks,
<DataTemplate x:Key="ItemsTemplate">
<StackPanel Orientation="Vertical"
Margin="0,5,0,5"
Width="{Binding
Path=ActualWidth,
RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type ScrollContentPresenter}}}" MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ScrollViewer}}, Path=ViewportWidth}" >
<TextBlock VerticalAlignment="Top" TextWrapping="Wrap" FontSize="14" Text="{Binding Path=CID}" />
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" >
<TextBlock>
<Label Foreground="{DynamicResource DisabledForegroundBrush}" >Posted by</Label>
<Label Foreground="{DynamicResource DisabledForegroundBrush}" VerticalContentAlignment="Top" Content="{Binding Path=ACID}" />
</TextBlock>
<TextBlock>
<Label Foreground="{DynamicResource DisabledForegroundBrush}" Margin="3,0,0,0">at</Label>
<Label Foreground="{DynamicResource DisabledForegroundBrush}" Margin="3,0,3,0" VerticalContentAlignment="Top" Content="{Binding Path=Type}" />
</TextBlock>
<TextBlock>
<Label Foreground="{DynamicResource DisabledForegroundBrush}">(</Label>
<Label Foreground="{DynamicResource DisabledForegroundBrush}" VerticalContentAlignment="Top" Content="{Binding Path=Route}" />
<Label Foreground="{DynamicResource DisabledForegroundBrush}">)</Label>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
<Style x:Key="ItemsListBox" TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Background" Value="{DynamicResource Transparent}"/>
<Setter Property="BorderBrush" Value="{DynamicResource Transparent}"/>
<Setter Property="BorderBrush" Value="{DynamicResource Transparent}"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
</Style>
<ListBox x:Name="ListViewFlightPlans" Grid.Column="0" ItemTemplate="{DynamicResource ItemsTemplate}"
MaxWidth="800" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="Black" BorderThickness="2,0,0,1">
</ListBox>
Dave
Unfortunately changing BorderBrush for the ListBoxItem won't have your desired effect, since the Border with the selection highlight is internal to the ControlTemplate of the ListBoxItem.
Instead, you can add a new Brush resource with the key of SystemColors.HighlightBrushKey, this is the key that the ListBoxItem uses for setting the selection highlight color.
The inactive selection brush uses the key of SystemColors.ControlBrushKey, so if you override both of these with a transparent Brush you're guaranteed not to have any selection color. You can read more about it in this article.
Here's an example with everything but your DataTemplate:
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Resources>
<x:Array x:Key="data" Type="{x:Type sys:String}">
<sys:String>a </sys:String>
<sys:String>bb</sys:String>
<sys:String>ccc</sys:String>
<sys:String>dddd</sys:String>
</x:Array>
</Grid.Resources>
<ListBox ItemsSource="{StaticResource data}">
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gold"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
</ListBox>
</Grid>