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 :)
Related
I have a datagrid as given below:
<DataGrid SizeChanged="dgvMap_SizeChanged" Padding="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" GridLinesVisibility="None" Background="Transparent"
BorderBrush="Transparent" IsReadOnly="True" ItemsSource="{Binding IsAsync=True}" EnableColumnVirtualization="True"
EnableRowVirtualization="True" AutoGenerateColumns="True" AutoGeneratingColumn="dgvMap_AutoGeneratingColumn"
CanUserAddRows="False" CanUserSortColumns="true" CanUserDeleteRows="False" HeadersVisibility="None"
Name="dgvMap" SelectionMode="Single" Panel.ZIndex="0" Margin="0,0,0,0" VirtualizingStackPanel.VirtualizationMode="Standard"
PreviewMouseDown="dgvMap_PreviewMouseDown" >
<!--for removing the blue color bkground default for row selection-->
<DataGrid.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</DataGrid.Resources>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Padding" Value="0"/>
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="50" />
</Style>
</DataGrid.CellStyle>
</DataGrid>
This is the style of template column:
<DataTemplate x:Key="MyDataTemplate" DataType="DataRowView">
<StackPanel Background="Transparent">
<Image Tag="{Binding}" Name="Layer0" Margin="0,0,0,0" Panel.ZIndex="1"
ToolTipService.HasDropShadow="True" ToolTipService.ShowDuration="20000" ToolTipService.InitialShowDelay="200" >
<Image.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="{Binding Converter={StaticResource IntToImageConverter}, ConverterParameter = Layer0}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- Hover image -->
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Source" Value="D:\small.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Resources>
</Image>
</StackPanel>
</DataTemplate>
Though in datagridcellstyle i have defined cell value as width and height as 50. But when i load datagrid with 9 rows its height is showing 452 instead of 450 (9*50) and in the same way width also showing more than that.
Why its showing like that??
How to avoid that??
may be because there is some by default padding or margin inside the template. You can either try giving padding for cell to 0 or can see inside control template of datagrid in Expression Blend that where the space is coming from.
I solved it by giving styles to datagridcolumnstyle like this
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Padding" Value="0"/>
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="50" />
</Style>
</DataGrid.ColumnHeaderStyle>
Here is the code :
<Window.DataContext>
<local:MainWindowViewModel />
</Window.DataContext>
<Window.Resources>
<Style x:Key="RadioToggleButtonStyle" TargetType="RadioButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<ToggleButton Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="25" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Window.Resources>
<Grid>
<RadioButton Name="radioButton1"
Height="29"
Margin="193,195,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
**Command="{Binding Path=RadioClickCommand}"**
Content="RadioButton"
Style="{StaticResource RadioToggleButtonStyle}" />
</Grid>
In MainWindowViewModel : I have following command registration
public ICommand RadioClickCommand
{
get { return new RelayCommand(RadioClickExecute); }
}
private void RadioClickExecute()
{
}
Button click never triggers the command bind.
any help would be appreciated.
You forgot in your style that you have to define a Command of a ToggleButton
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<ToggleButton Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Command="{Binding Command, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
I have the following treeview defined in my xaml:
<TreeView Name="PST_TreeView"
Grid.Row="0"
Grid.Column="0"
Width="Auto"
Height="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ItemsSource="{Binding SitesCollection}"
ItemTemplate="{StaticResource SitesTemplate}"
Style="{StaticResource TreeViewStyleBasic}" />
With Resource bindings targeting my resources file:
<Style x:Key="TreeViewStyleBasic" TargetType="TreeView">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{DynamicResource TitleBarButtons_BorderBrush}" />
<Setter Property="BorderThickness" Value="0 0 2 0" />
</Style>
<Style x:Key="TreeViewItemStyle_CatNodes" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Snow" />
<Setter Property="FontFamily" Value="Calibri" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="TextAlignment" Value="Left" />
</Style>
<Style x:Key="TreeViewItemStyle_ChildNodes" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Snow" />
<Setter Property="FontFamily" Value="Calibri" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="TextAlignment" Value="Left" />
</Style>
<DataTemplate x:Key="VolumeInfoDataTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Margin="5"
Style="{DynamicResource TreeViewItemStyle_ChildNodes}"
Text="{Binding VolumeName}" />
</StackPanel>
</DataTemplate>
<HierarchicalDataTemplate x:Key="SitesTemplate"
ItemsSource="{Binding VolumesList}"
ItemTemplate="{StaticResource VolumeInfoDataTemplate}">
<StackPanel Orientation="Horizontal">
<TextBlock Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Margin="5"
Style="{DynamicResource TreeViewItemStyle_CatNodes}"
Text="{Binding SiteName}" />
</StackPanel>
</HierarchicalDataTemplate>
The xaml and resource look ups above work find and as expected.
How might I employ triggers to extend my style definitions to say for example handle the 'IsSelected' event so that the selected tree node will have a slate grey border and a light grey background?
RESEARCH: Kind of thing I am going for.
UPDATE: There is no IsSelected property on the TreeView, however TreeViewItem does has one defined.
Try this:
<DataTemplate x:Key="VolumeInfoDataTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Margin="5"
Style="{DynamicResource TreeViewItemStyle_ChildNodes}"
Text="{Binding VolumeName}"
Name="Tb" />
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="True">
<Setter TargetName="Tb" Property="Background" Value="LightGray"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
I have a tree in WPF that has no root node, but has defined TreeViewItems for separate categories. Each of these TreeViewItems have their ItemsSource bound to the display object. The data displays fine. Now I'm trying to make the tree appear like the Windows7 Explorer trees.
I've used some of the styling from this post: WPF TreeView: How to style selected items with rounded corners like in Explorer
Anyhow here is the TreeViewItem:
<TreeViewItem ItemsSource="{Binding Path=Configuration.CognosServers}"
IsExpanded="True"
Visibility="{Binding ItemsSource.Count, Converter={StaticResource ResourceKey=TreeViewItemVisibility1}, RelativeSource={RelativeSource Self}}">
<TreeViewItem.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="True"/>
</Style>
</TreeViewItem.ItemContainerStyle>
<TreeViewItem.HeaderTemplate>
<DataTemplate>
<Border Margin="0,5,0,0">
<Border.ContextMenu>
<ContextMenu>
<MenuItem Header="Remove" Click="TreeItemMenu_RemoveClick" />
<MenuItem Header="Add Client..." Click="TreeItemMenu_AddNewClient" />
</ContextMenu>
</Border.ContextMenu>
<StackPanel Orientation="Horizontal">
<Image Source="/WPF;component/Images/server_chart.png"
Margin="0,0,5,0"/>
<TextBlock Text="Cognos Servers" />
</StackPanel>
</Border>
</DataTemplate>
</TreeViewItem.HeaderTemplate>
<TreeViewItem.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Namespaces}">
<Border>
<TextBlock Text="{Binding DisplayName}" PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" />
</Border>
<HierarchicalDataTemplate.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource ResourceKey=TreeViewItemStyle1}">
<Setter Property="IsExpanded" Value="True"/>
</Style>
</HierarchicalDataTemplate.ItemContainerStyle>
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Clients}">
<Border>
<TextBlock Text="{Binding DisplayName}" PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" />
</Border>
<HierarchicalDataTemplate.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource ResourceKey=TreeViewItemStyle1}">
<Setter Property="IsExpanded" Value="True"/>
</Style>
</HierarchicalDataTemplate.ItemContainerStyle>
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<Border>
<TextBlock Text="{Binding DisplayName}"
ContextMenu="{StaticResource ResourceKey=ContextMenuTreeItem}"
PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" />
</Border>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeViewItem.ItemTemplate>
</TreeViewItem>
The style I'm apply to the TreeView appears like this:
<TreeView x:Name="TreeViewLoadedItems"
Grid.Row="1"
VerticalAlignment="Stretch"
ItemContainerStyle="{DynamicResource TreeViewItemStyle1}"
MouseDoubleClick="TreeViewItem_MouseDoubleClick"
SelectedItemChanged="TreeViewLoadedItems_SelectedItemChanged" >
Finally the style I'm applying is this:
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type TreeViewItem}">
<!-- Style for the selected item -->
<Setter Property="BorderThickness" Value="1"/>
<Style.Triggers>
<!-- Selected and has focus -->
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="#7DA2CE"/>
</Trigger>
<!-- Mouse over -->
<!--<Trigger Property="helpers:TreeView_IsMouseDirectlyOverItem.IsMouseDirectlyOverItem" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFAFBFD" Offset="0"/>
<GradientStop Color="#FFEBF3FD" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#B8D6FB"/>
</Trigger>-->
<!-- Selected but does not have the focus -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="#D9D9D9"/>
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
</Setter.Value>
</Setter>
</Style>
No Matter what I've done I can't seem to get each item to look the same when selected. Only the leaf nodes seem to be picking up the style. I always have trouble when there are HierarchialDataTemplates and I need to style things. What gives?!
In your style you set the ItemContainerStyle, why? That way the immediate TreeViewItem the style is applied to will not have the style, maybe that somehow even propagates down to the leaf; you should not need to set that property. Just place a style for TreeViewItems in the Resources of the TreeView and it will automatially apply to each item, move everything in the ItemContainerStyle up to the actual main style.
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>