I still didn't get it. Could you please show me exactly how to override ListBox's default behavior.
Everytime when ListBoxItem is selected the Border's background should be changed. Not the background of the whole row but only background of the border which's specified.
<ListBox ItemsSource="{Binding Source={StaticResource AssetsViewSource}}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="Black">
<StackPanel>
<TextBlock Text="Name: " />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use the DataTemplate's Triggers collection, with a RelativeSource to get you to the containing ListBoxItem:
<DataTemplate>
<Border BorderThickness="2" BorderBrush="Black" Name="Bd">
<StackPanel>
<TextBlock Text="Name: " />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</Border>
<DataTemplate.Triggers>
<DataTrigger Value="True"
Binding="{Binding
IsSelected,
RelativeSource={RelativeSource
AncestorType={x:Type ListBoxItem}}}">
<!-- everybody loves HotPink -->
<Setter TargetName="Bd" Property="Background" Value="HotPink"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
Simply add the following into the ListBox Item tag
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
</ListBox.Resources>
That should do the trick..
Related
I'm facing two problems with my projet:
SpackPanel not expanding the space available inside DataGridTemplateColumn
TextBlock not wrapping
I have a DataGrid with three different columns, and I want the one in the middle to use all available space left. Also in that column I have a StackPanel because I need to have two elements inside:
Border with icon inside that just appears depending on Use_Half_Portion value
TextBlock showing text
Giving background colors to the elements I have noticed that the StackPanel doesn't fill all of the available space left insite the column, and the wrap in the TextBlock is not being respected. Im supposing that the StackPanel is not assuming the MaxWidth of the DataGridTemplateColumn and it's using unlimited space, and because of that the TextBlock assumes that the limit is not being reached to make the text wrap.
Here's my code:
<DataGrid x:Name="ConsumptionList" ItemsSource="{Binding ConsumptionList}"
AutoGenerateColumns="False" IsReadOnly="True"
CanUserReorderColumns="False" CanUserResizeColumns="False"
BorderBrush="{x:Null}" VerticalContentAlignment="Center" CanUserSortColumns="False" HeadersVisibility="Column" Margin="0,0,0,-4" Background="{x:Null}">
<DataGrid.Resources>
<Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource foScrollBar.Small}"/>
</DataGrid.Resources>
<DataGrid.ColumnHeaderStyle>
<StaticResource ResourceKey="clientScreenList.Header"/>
</DataGrid.ColumnHeaderStyle>
<DataGrid.RowStyle>
<StaticResource ResourceKey="clientScreenList.Lines"/>
</DataGrid.RowStyle>
<DataGrid.CellStyle>
<StaticResource ResourceKey="clientScreenList.Cells"/>
</DataGrid.CellStyle>
<DataGrid.Style>
<StaticResource ResourceKey="foBillingList"/>
</DataGrid.Style>
<DataGrid.Columns>
<!--quantity-->
<DataGridTextColumn x:Name="ConsQttColumn" MinWidth="20" Width="Auto" MaxWidth="80" FontFamily="Segoe UI Semibold"
Binding="{Binding Quantity, Converter={StaticResource DecimalToQuantityConverter}}" Header="{x:Static localization:LanguageRes.consList_quantity}" />
<!--description-->
<DataGridTemplateColumn x:Name="ConsDescriptionColumn" Header="Descrição" Width="*" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Background="#FFDC1A1A">
<Border CornerRadius="30" Grid.Column="0" Width="30" Height="30" Background="{x:Null}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,3,0">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding Use_Half_Portion}" Value="1">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Grid.Column="1" TextWrapping="Wrap" HorizontalAlignment="Center" Style="{StaticResource icon}" TextAlignment="Center" FontSize="22" Text="{x:Static TechUI:AppConstants+ICONS.HalfDose}" Padding="0"
Margin="0" Foreground="Black" Background="{x:Null}" />
</Border>
<TextBlock Text="{Binding Product_Description}" HorizontalAlignment="Left" TextAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe UI Semibold" Background="#FFB4AD1C" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- total price-->
<DataGridTemplateColumn x:Name="ConsTotalColumn" Header="Preço Total" Width="Auto" MaxWidth="135">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" MaxWidth="135" VerticalAlignment="Center" >
<TextBlock MaxWidth="135" HorizontalAlignment="Stretch" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe UI Semibold" >
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Text" Value="{Binding Total_W_Vat, Converter={StaticResource DecimalToPriceConverter}}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Is_Composite}" Value="1">
<Setter Property="Text" Value=" " />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
As you can see in the image, the red element is the StackPanel and the green element is the TextBlock. In the first line you can see that the text is being cut and not being wrapped, the full text is "Almondegas Frango"
I have found a solution.
Just changed the StackPanel for a DockPanel and it worked the exact same way I wanted!
Trying to use the same control for displaying a column with images and without, depending on a boolean (HistoryOn). Next xaml code works, but always shows the images.
<DataGridTemplateColumnx:Name="dgtc">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding
Converter={StaticResource myDataRowToListConverter}}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border x:Name="imageBorder" BorderThickness="1" BorderBrush="Black"
MouseLeave="imageBorder_MouseLeave"
MouseEnter="imageBorder_MouseEnter"Height="16">
<Image x:Name="myImage" Source="{BindingMyImagePath}"
MouseUp="Image_MouseUp" HorizontalAlignment="Center">
</Image>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Next xaml code displays only the path, not the images. What is wrong?
<DataGridTemplateColumn x:Name="dgtc">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding
Converter={StaticResource myDataRowToListConverter}}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl Content="{Binding MyImagePath}">
<ContentControl.Style>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding HistoryOn}" Value="true">
<Setter Property="ContentTemplate"
Value="{StaticResource imagesOff}" />
</DataTrigger>
<DataTrigger Binding="{Binding HistoryOn}" Value="false">
<Setter Property="ContentTemplate"
Value="{StaticResource imagesOn}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
In the Windows.Resources:
<DataTemplate x:Key="imagesOn">
<Border x:Name="imageBorder1" BorderThickness="1" BorderBrush="Black"
MouseLeave="imageBorder_MouseLeave"
MouseEnter="imageBorder_MouseEnter"Height="16">
<Image x:Name="myImage" Source="{BindingMyImagePath}"
MouseUp="Image_MouseUp"HorizontalAlignment="Center">
</Image>
</Border>
</DataTemplate>
<DataTemplatex:Key="imagesOff">
<Border x:Name="imageBorder2" BorderThickness="1" BorderBrush="Black"
MouseLeave="imageBorder_MouseLeave"
MouseEnter="imageBorder_MouseEnter"Height="16">
</Border>
</DataTemplate>
You can use CellTemplateSelector to Choose the desired template depending on the object take a look at this link to see a detailed example on this topic
Good Luck
I have an hierarchical Treeview which each item contains a complexed entity which consists of:
Border
-- Check box
-- TextBlock
i want to change the opacity of the border whenever the checkbox IsEnabled property is set to "False"
this is what i have:
<HierarchicalDataTemplate DataType="{x:Type sd:LegendTreeViewItem}" ItemsSource="{Binding Path=SubSensors}">
<Border x:Name="treeViewItemBorder" Height="24" Margin="3 3 3 3" Width="350" Background="{Binding Path=Color}" CornerRadius="8 8 8 8">
<StackPanel Orientation="Horizontal">
<CheckBox x:Name="treeViewItemCheckbox" Margin="5 5 5 5" Click="CheckBox_Click" IsChecked="{Binding IsChecked}" VerticalAlignment="Center" IsEnabled="{Binding Enabled}" Style="{StaticResource OpacityOnDisabled}"/>
<TextBlock Height="Auto" FontFamily="Tahoma" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Left" Text="{Binding Path=Name}"
VerticalAlignment="Center" ToolTip="{Binding Path=Name}"/>
</StackPanel> </Border>
</HierarchicalDataTemplate>
<TreeView x:Name="legendTypeTree" Grid.Row="1" Foreground="White" ItemsSource="{Binding ElementName=uc, Path=TypeItemsSource}">
<TreeView.Resources>
<Style x:Key="OpacityOnDisabled" TargetType="{Binding RelativeSource={RelativeSource AncestorType=Border}}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsEnabled}" Value="False">
<Setter Property="Border.Opacity" Value="0.3"/>
<Setter Property="Border.Background" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TreeView.Resources>
</TreeView>
Move both HierarchicalDataTemplate and Style for the Border in the TreeView resources. (Style first in order for the StaticResource OpacityOnDisabled to resolve properly).
You want to change the style of the border, so there is no sense to apply style on the checkbox. Move Style="{StaticResource OpacityOnDisabled}" from the CheckBox to the Border element. Set the correct type of the style and for the DataTrigger change the bindinig to Binding="{Binding ElementName=treeViewItemCheckbox, Path=IsChecked}"
In the end you should have something like, which should do what you want:
Result:
<TreeView
x:Name="legendTypeTree"
Grid.Row="1"
Foreground="White"
ItemsSource="{Binding ElementName=uc, Path=TypeItemsSource}">
<TreeView.Resources>
<Style x:Key="OpacityOnDisabled" TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=treeViewItemCheckbox, Path=IsChecked}" Value="False">
<Setter Property="Border.Opacity" Value="0.3"/>
<Setter Property="Border.Background" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
<HierarchicalDataTemplate DataType="{x:Type sd:LegendTreeViewItem}" ItemsSource="{Binding Path=SubSensors}">
<Border
x:Name="treeViewItemBorder"
Height="24"
Margin="3 3 3 3"
Width="350"
Background="{Binding Path=Color}"
CornerRadius="8 8 8 8"
Style="{StaticResource OpacityOnDisabled}">
<StackPanel Orientation="Horizontal">
<CheckBox
x:Name="treeViewItemCheckbox"
Margin="5 5 5 5"
Click="CheckBox_Click"
IsChecked="{Binding IsChecked}"
VerticalAlignment="Center"
IsEnabled="{Binding Enabled}" />
<TextBlock
Height="Auto"
FontFamily="Tahoma"
FontWeight="Bold"
Foreground="Black"
HorizontalAlignment="Left"
Text="{Binding Path=Name}"
VerticalAlignment="Center"
ToolTip="{Binding Path=Name}"/>
</StackPanel>
</Border>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
I have a ListBox. It has a white background. How can I get rid of it?
Here is the XAML I'm trying. Whatever I do, I can't get rid of that background. (I'm not sure if it's on each item, which happen to take up all the space in the ListBox, or if it's on the background of the ListBox itself.)
<ListBox x:Name="topThreeHits" ItemsSource="{Binding TopThreeHits}" Margin="0,10,0,0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Transparent"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10,0" Background="Transparent">
<Image Source="{Binding Image, FallbackValue=/PlumPudding;component/Images/file.png}" />
<TextBlock>
<Run Text="{Binding Name, FallbackValue='File Name'}" FontWeight="Bold" />
<Run Text="." Foreground="#787878" FontWeight="Light" />
<Run Text="{Binding TypeExtension, FallbackValue='type'}" Foreground="#787878" FontWeight="Light" />
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'm using Silverlight 4.
Your code is working fine, and properly setting the background style. I am assuming what you want to do is blow away the default item container completely so there is no background, including rollovers, etc.
The best way to do that is like this:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter Content="{TemplateBinding Content}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
I tried to add a Border around the ListBox with a Green Background and set the Background to Transparent for your ListBox and it seems to be working fine.
<Border Background="Green">
<ListBox x:Name="topThreeHits"
Background="Transparent"
ItemsSource="{Binding Customers}" Margin="0,10,0,0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Transparent"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10,0" Background="Transparent">
<Image Source="{Binding Image, FallbackValue=/PlumPudding;component/Images/file.png}" />
<TextBlock>
<Run Text="{Binding Name, FallbackValue='File Name'}" FontWeight="Bold" />
<Run Text="." Foreground="#787878" FontWeight="Light" />
<Run Text="{Binding TypeExtension, FallbackValue='type'}" Foreground="#787878" FontWeight="Light" />
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
I have a TreeView in WPF which I have bound to a collection of categories that itself contains a collection of categories and son on and so forth. Currently, I'm binding the collection successfully and having all of my category names appearing. However, I also have an IsExpanded property on my collection objects that when all set to true only expand the first TreeViewItem but no subsequent ones.
Does anyone know what may be wrong with my TreeView styles?
<HierarchicalDataTemplate x:Key="menuHierarchicalTemplate" ItemsSource="{Binding Path=SubCategories, Mode=TwoWay}" >
<Border x:Name="treeViewItemBorder"
CornerRadius="3"
MinWidth="125"
BorderBrush="Silver" Background="Transparent">
<StackPanel Orientation="Horizontal" >
<TextBlock Height="24" Padding="5" Text="{Binding Path=Name}" />
</StackPanel>
</Border>
</HierarchicalDataTemplate>
<Style x:Key="treeViewItemStyle" TargetType="TreeViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<TreeViewItem IsExpanded="{Binding Path=IsExpanded, Mode=TwoWay}"
ItemsSource="{Binding Path=SubCategories}"
ItemTemplate="{StaticResource menuHierarchicalTemplate}" >
<TreeViewItem.Header>
<StackPanel Orientation="Horizontal" >
<TextBlock Height="24" FontSize="12" Padding="5" Text="{Binding Path=Name}" />
</StackPanel>
</TreeViewItem.Header>
</TreeViewItem>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<TreeView Name="menuTreeView"
Background="Transparent"
BorderBrush="Transparent"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="10"
ItemContainerStyle="{StaticResource treeViewItemStyle}">
</TreeView>
Thanks,
Xam
You are applying the "treeViewItemStyle" only to the first level of items in the TreeView. You have to set it as well as the ItemContainerStyle of the TreeViewItems. So, in your ControlTemplate, you'll need something like:
<ControlTemplate TargetType="TreeViewItem">
<TreeViewItem ItemContainerStyle="{StaticResource treeViewItemStyle}".../>
</ControlTemplate>
Better yet, you can just remove the "x:Key" attribute in your Style declaration. Doing so will automatically apply the style to all TreeViewItems.
SIDE NOTE:
I would suggest that instead of overriding the ControlTemplate like what you did above, just use property Setters in the Style instead. Something like:
<Style TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}"/>
<Setter Property="ItemsSource" Value="{Binding Path=SubCategories}"/>
<Setter Property="ItemTemplate" Value="{StaticResource menuHierarchicalTemplate}"/>
<Setter Property="Header">
<Setter.Value>
<StackPanel Orientation="Horizontal" >
<TextBlock Height="24" FontSize="12" Padding="5" Text="{Binding Path=Name}" />
</StackPanel>
</Setter.Value>
</Setter>
</Style>
It's quite unusual to use the same Control as part of the ControlTemplate of itself (i.e. using TreeViewItem in the ControlTemplate of a TreeViewItem).