I am using a few listboxes to display a data that I get from a webservice. Also, I custimized the way the data is displayed. All is working OK.
The only problem I'm having is when I clicked at any ListBoxItem and them don't cover the entire hight of the listbox, the remaining space change its background to a default color like: WhiteSmoke or something like that.
I'm using the ItemDataTemplate to display the customize data and the ItemContainerStyle to change the way the listbox interact in any state like: pressed, selected, unfocus, etc.
Does anyone have an idea how to change this?
Regards!
I'm guessing you've got the situation where your list items don't stretch all the way across the ListBox and so you're seeing the highlight underneath them, you can wipe out those colours with
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</ListBox.Resources>
if you want to override the default background of the listbox write in the xaml of your WPF:
<Style TargetType="{x:Type ListBox}" >
<Setter Property="Background" Value="thecoloryouwant" />
</Style>
If I understand you correctly, you want to set the Background property of the ListBoxItem... you can do this like this:
<ListBox ItemsSource="{Binding SomeCollection}">
<ListBox.ItemContainerStyle>
<Style>
<Setter Property="Control.Background" Value="WhiteSmoke" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Related
I have been trying very hard to disable hover, mouse over and row selections on datagrid rows. I had used the following code for Wpf application in the past and it worked perfectly. However, I am in the middle of the process of migrating my code to the new Winui3 and I just can't make it work again.
but the problem is how to hide row selections. See this picture:
Here is the code that works for Wpf;
<controls:DataGrid.Style>
<Style TargetType="controls:DataGridCell">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>
</controls:DataGrid.Style>
Now, FocusVisualStyle doesn't exists. I was able to disable cell borders on selection by overriding some brush resources like these:
<SolidColorBrush x:Key="DataGridCellFocusVisualPrimaryBrush" Color="Transparent" />
<SolidColorBrush x:Key="DataGridCellFocusVisualSecondaryBrush" Color="Transparent" />
This should work:
<controls:DataGrid>
<controls:DataGrid.Resources>
<Color x:Key="DataGridRowSelectedBackgroundColor">Transparent</Color>
<Color x:Key="DataGridRowSelectedHoveredUnfocusedBackgroundColor">Transparent</Color>
<Color x:Key="DataGridRowSelectedUnfocusedBackgroundColor">Transparent</Color>
<!--
This one is better not being just "Transparent".
This way you won't lose visual effects for hovered selected rows.
-->
<StaticResource
x:Key="DataGridRowSelectedHoveredBackgroundColor"
ResourceKey="SystemListLowColor" />
</controls:DataGrid.Resources>
</controls:DataGrid>
You can find the colors in the GitHub repo.
I have extended ListBox control and wanted to give it rounded corner so I have applied styles as below and it works fine:
<control:MultiSelectionListBox SelectionMode="Extended" ItemsSource="{Binding Offerables,Mode=TwoWay}"
SelectedItemsList="{Binding SelectedOfferables, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" DisplayMemberPath="Name"
Grid.Row="6" Grid.Column="0" MaxHeight="150">
<control:MultiSelectionListBox.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"></Setter>
</Style>
</control:MultiSelectionListBox.Resources>
</control:MultiSelectionListBox>
but I have too many Listboxes and I don't wanted to add style in each and every control individually.
I wanted to define this style in app.xaml and wanted to reuse that design by name like Style = "{StaticResource RoundedListBoxStyle}".
I have tried like below in app.xaml but with no luck
<Style TargetType="ListBox" x:Key="RoundedListBoxStyle">
<Setter Property="Border" Value="10"></Setter>
</Style>
The member Border is not recognized or is not accessible.
Please guide me what I am doing wrong here.
Finally I managed to do that as Bradley Uffner mentioned in the comment Border is not the property of the ListBox and we cannot use it in style like that. I used Style.Resource and mentioned Style for Border elements as below:
<Style TargetType="ListBox" x:Key="RoundedListBoxStyle">
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"></Setter>
</Style>
</Style.Resources>
</Style>
and it worked. :)
Sometimes content of my ListBoxItem is wider than the listbox, so it is cropped by ListBox. That is fine but the gradient background of ListBoxItem is not stretched to the listbox width but to the width of ListBoxItem's content. With the code below I am trying to force gradient to be edge-to-edge of ListBox. ListBox has dynamic width so I can not predefine ListBoxItem's width. What am I missing?
<Style x:Key="MyListbox" TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
and
<DataTemplate DataType="{x:Type local:MyData}" >
<Grid HorizontalAlignment="Stretch" >
<Style TargetType="{x:Type Grid}">
...
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="#ffffff" Offset="0"/>
<GradientStop Color="#000000" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
I'm not entirely certain it's the effect you're going for, but you could try adding this to your Grid in the DataTemplate.
<Grid Width="{Binding Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}}">
Essentially it's trying to locate the ListBox parent, and if successful, will grab the Width property, which will ensure your ListBoxItems are all of the same width (that of the ListBox). That worked for me in a quick test project.
If what you're after is just a simple gradient from edge to edge on the ListBox itself, you should be able to get that effect by styling the ListBox background and giving the ListBoxItems transparent backgrounds. I assumed you just wanted the gradient on the ListBoxItems.
How do I do this? Everything I've founds says this should work, but it doesn't for me. What am I doing wrong?
<ListView ItemsSource="{Binding ListViewItems}" >
<ListView.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</Style.Resources>
</Style>
</ListView.ItemContainerStyle>
</ListView>
The code you have shown above does work for me. This, however, sets the colors when ListBox is in focus. To set the color when it is not in focus, try ...
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />
Check this example to implement it on Win 8.
Try to directly set it in <ListView.Resources><SolidColorBrush x:Key=...></ListView.Resources>
Try to define a SolidColorBrush with Key "{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" too.
UPDATE:
Just tried to run the following xaml on win7 and targeting .net 4.5:
<ListView ItemsSource="{Binding DummyItems}">
<ListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="LightGreen"/>
</ListView.Resources>
</ListView>
Works like a charm!
Nevertheless, it seems to be that this is not going to work on win8.
So there may be no way of getting around to define your own template. Refer to this page.
Basically PhoneAccentBrush comes with the SelectedTheme accent color from Phone. But i need always BlueAccentBrush for specific xaml file in the WindowsPhone application.
Actually my requirement is, When the ListPicker is in FullMode.. The SelectedItem color in the Popup depends upon the PhoneAccentBrush... If i set the Phone theme as Red.. then SelectedItem color in the Popup will be red.. But i dont like this.. I want always BlueAccentBrush for the SelectedItem in the Popup..
So can anyone help me to override the PhoneAccentBrush in the xaml file..
Add ListPicker as below,
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >
<toolkit:ListPicker ListPickerMode="Full">
<toolkit:ListPickerItem Content="Item1"/>
<toolkit:ListPickerItem Content="Item1"/>
<toolkit:ListPickerItem Content="Item2"/>
<toolkit:ListPickerItem Content="Item3"/>
<toolkit:ListPickerItem Content="Item4"/>
</toolkit:ListPicker>
</StackPanel>
To override the ListPicker Selected Item Color
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:System="clr-namespace:System;assembly=mscorlib">
<Color x:Key="PhoneAccentColor">Blue</Color>
<SolidColorBrush x:Key="PhoneAccentBrush" Color="{StaticResource PhoneAccentColor}"/>
<Style x:Key="PhoneTextAccentStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
</Style>
</ResourceDictionary>
For more Details refer the below sample: http://www.windowsphonegeek.com/upload/articles/MangoCustomApplicationTheme%20_1_2_3.zip
You can't override PhoneAccentBrush. It's a "system" resource. But you can change the way the ListPicker behaves. See http://windowsphonegeek.com/articles/customizing-listpicker-for-wp7-part1 for a series of articles that show how.