We Keep Coding

Wpf Custom ListBox with Rounded Border

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

Add a mouseover and pressed/clicked effect on element in UWP app

I'm currently working on an app to show all parking spaces in Kortrijk (a city in Belgium). This is how it looks at the moment:
Design
My question is: how can I for example change the color of the element on mouseover or on click. I want to accomplish this in the XAML and this is the code that I have now.
Code
MainPage.xaml
<Page
x:Class="ParkingSpots.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ParkingSpots"
xmlns:model="using:ParkingSpots.model"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
mc:Ignorable="d">
<Page.Resources>
<model:ParkingSpot x:Key="spots"/>
</Page.Resources>
<Grid Style="{StaticResource mainGrid}">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Parking spots in Kortrijk"/>
<ListView ItemsSource="{Binding Source={StaticResource spots}, Path=ParkingSpots}" ItemTemplate="{StaticResource ParkingSpotTemplate}" ItemsPanel="{StaticResource ParkingSpotsTemplate}"/>
</Grid>
style.xaml (external xaml file)
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ParkingSpots.style"
xmlns:conv="using:ParkingSpots.converter">
<conv:StreetConverter x:Key="StreetConv" />
<Color x:Key="Color1">#FFB3B6F2</Color>
<Color x:Key="Color2">#FF5A58D9</Color>
<Color x:Key="Color3">#FFF2F2F2</Color>
<SolidColorBrush x:Key="Color1Brush" Color="{StaticResource Color1}" />
<SolidColorBrush x:Key="Color2Brush" Color="{StaticResource Color2}" />
<SolidColorBrush x:Key="Color3Brush" Color="{StaticResource Color3}" />
<Style x:Name="mainGrid" TargetType="Grid">
<Setter Property="Background" Value="{StaticResource Color1Brush}"/>
</Style>
<DataTemplate x:Key="ParkingSpotTemplate">
<ListViewItem>
<ListViewItem.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource Color3Brush}" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="8,0,0,0" />
</Style>
</ListViewItem.Resources>
<TextBlock x:Name="ParkingSpotInfo" Grid.Row="0" Grid.Column="0" Text="{Binding Street, Converter={StaticResource StreetConv}}"/>
</ListViewItem>
</DataTemplate>
<ItemsPanelTemplate x:Key="ParkingSpotsTemplate">
<VariableSizedWrapGrid x:Name="wrapGrid"></VariableSizedWrapGrid>
</ItemsPanelTemplate>
I tried something with style.triggers but this is only possible in WPF apps and not in UWP apps. I've also read a lot of things about visualstates but I don't know how to use it and if this is the best way to do such effects.
Thanks in advance

You should probably be using a ListView to display this data instead of an ItemsControl (unless you have a good reason for doing so). ListView extends from ItemsControl and adds to it lots of useful features, such as:
Single/multiple item selection.
ItemClick event.
Each item container is a ListViewItem control which has its own features like visual states and a checkbox, and the presentation of the ListViewItem is managed by a ListViewItemPresenter which can deliver these features in an optimized manner.
Built-in ScrollViewer.
Data and UI virtualization. UI virtualization is a big advantage when you have 100s of items.
Accessible. Supports tab-focusing.
Probably more...
ItemsControl isn't typically used for situations where you want to interact with the items (by click/tap, for example).
ListView by default has its own style which can be easily overridden to match what you have already.
If you only want to style the ListViewItem background/foreground for each visual state, then you can override these styles:
<ListView>
<ListView.Resources>
<!--
These resources are applied to this ListView only. Put in a
higher scope (page or app) depending on what you want it to affect.
-->
<SolidColorBrush x:Key="ListViewItemBackgroundPointerOver" Color="Red"/>
<SolidColorBrush x:Key="ListViewItemForegroundPointerOver" Color="Violet"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="Yellow"/>
<SolidColorBrush x:Key="ListViewItemForegroundSelected" Color="LimeGreen"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="Blue"/>
<SolidColorBrush x:Key="ListViewItemBackgroundPressed" Color="Cyan"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPressed" Color="Orange"/>
</ListView.Resources>
</ListView>

Make a Button resource and use it in multiple places

how can i define a global button and use it in multiple places in WPF.
here is my button witch i want to use it in multiple places.
<Button x:Key="Attach" Width="90" Margin="220,0,0,0" Content="Attach" Height="16" FontSize="11"/>
however i tried to define it in App.xaml(Application.Resources)
and also in MainWindow.xaml (inside Window.Resources)
But i cannot access it in CodeBehind
Button button = Resources["Attach"];
My question is where to define my button and if i defined it correct how to use it in CodeBehind and XAML.

In your App.xaml you will have to add and define a style that you want for your buttons.
<Application.Resources>
<Style x:Key="Attach" TargetType="{x:Type Button}">
<Setter Property="Height" Value="16" />
<Setter Property="Width" Value="90" />
<Setter Property="Content" Value="Attach" />
<Setter Property="Margin" Value="220,0,0,0" />
<Setter Property="FontSize" Value="11" />
</Style>
</Application.Resources>
And to access it in your code-behind you will need to initialize a new style object and populate it with the style you created in your App.xaml. Lastly just add that new style to the style property of your button.
Style style = this.FindResource("Attach") as Style;
Button.Style = style;

In your MainWindow.xaml
<Window.Resources>
<HierarchicalDataTemplate
x:Key="TreeViewMainTemplate"
ItemsSource="{Binding SubTopics}">
<Button
Width="90"
Margin="220,0,0,0"
Content="Attach"
Height="16"
FontSize="11" />
</HierarchicalDataTemplate>
</Window.Resources>
Defining a HiercharchicalDataTemplate with your button layout will allow you to re-use it as an ItemTemplate in your TreeView:
<TreeView
Name="TopicTreeView"
ItemsSource="{Binding Topics}"
ItemTemplate="{StaticResource TreeViewMainTemplate}">
</TreeView>
As you see I'm making intensive use of binding for resources as well as data because I'm building my wpf/sl apps the MVVM way. Doing so makes the need to access controls from code behind obsolete and might be worth looking into for you.

How to change the default background in listbox when it's pressed?

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>

I need help implementing a style into my radTreeView

I want to take the highlight background off of the radtreeview. I created a style to do this, but I keep getting errors and exceptions such as "Items collection must be empty." If I comment out the style the application works fine, so I know that it is the cause of the problem. I am fairly new to WPF, and I am sure I just don't understand how to use styles yet.
Thanks for your help. Here is the code.
<Grid x:Name="LayoutRoot" Background="Salmon">
<telerik:RadTreeView x:Name="radTreeView" Margin="8" ItemsSource="{Binding Errors}" Background="Salmon" Style="{StaticResource treeStyle}">
<Style TargetType="{x:Type telerik:RadTreeViewItem}" x:Name="treeStyle">
<Setter Property="Focusable" Value="False"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
</Trigger>
</Style.Triggers>
</Style>
<telerik:RadTreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding SubItems}" >
<Grid Background="Salmon">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Description}" IsHitTestVisible="False" />
<ListBox Grid.Row="1" ItemsSource="{Binding Messages}" Margin="20,0,0,0" BorderBrush="#00000000" BorderThickness="0" Background="Salmon" IsHitTestVisible="False" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Message}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</HierarchicalDataTemplate>
</telerik:RadTreeView.ItemTemplate>
</telerik:RadTreeView>
</Grid>
</UserControl>
If you know that this is not going to work, I was also trying to get rid of the highlight with the style code:
<Style TargetType="TreeViewItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFF"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="#000"/>
</Style.Resources>
</Style>

You get exceptions because your style tag is actually an item in the tree, and you have ItemsSource set.
Surround the style with <telerik:RadTreeView.ItemContainerStyle> tag.
This should solve the exception but it will not give you the result that you expect since the control template of the tree view item is actually showing another border that is not affected by the Background property. You will need to change the control template.
Telerik change the styles between releases, so giving you a template of a wrong version will probably won't help you.
But, you can go to the installation folder for Telerik and look for a folder called "Themes". There you'll find a solution with all the themes for telerik.
Choose the one that you use.
Find the resource dictionary for the tree view and copy the style and template for the item to your project.
Change xmlns definitions, make sure you have all the brushes and resources that the style depends upon.
Run to see that the style is ok.
In the template, find the VisualState with x:Name="MouseOver" and delete the storyboard inside it.