I’m trying to create custom Itemscontrol class to display a group of different shapes.
To speed up process, I have reused source code from CodeProject (WPF Diagram Designer - Part 4) where all implementation is done but shapes are added from XAML code. For my purposes, I need to add them from code behind (dynamically) so I bound custom Itemscontrol to list of ObservableCollection. Now, instead of shapes be presented like this:
I get something like this:
Can somebody tell me what I’m doing wrong?
Any help will be appreciated. Thanks in advance.
XAML:
<s:Toolbox x:Key="FlowChartStencils" ItemsSource="{Binding ElementName=MyDesigner, Path=ToolboxDataItems}" ItemTemplate="{StaticResource toolboxItemTemplate}" ItemSize="190,150" SnapsToDevicePixels="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</s:Toolbox>
<DataTemplate x:Key="toolboxItemTemplate">
<Grid Margin="5,5,5,5">
<Path Style="{StaticResource Process}">
<s:DesignerItem.DragThumbTemplate>
<ControlTemplate>
<Path Style="{StaticResource Process_DragThumb}"/>
</ControlTemplate>
</s:DesignerItem.DragThumbTemplate>
</Path>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text=" {Binding Title}" IsHitTestVisible="False" FontWeight="Bold"/>
</Grid>
</DataTemplate>
<Style x:Key="Process" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
<Setter Property="Data" Value="M 0,0 H 60 V40 H 0 Z"/>
</Style>
<Style x:Key="Process_DragThumb" TargetType="Path" BasedOn="{StaticResource Process}">
<Setter Property="IsHitTestVisible" Value="true"/>
<Setter Property="Fill" Value="Transparent"/>
<Setter Property="Stroke" Value="Transparent"/>
</Style>
<Style x:Key="FlowChartItemStyle" TargetType="Path">
<Setter Property="Fill" Value="{StaticResource ItemBrush}"/>
<Setter Property="Stroke" Value="{StaticResource ItemStroke}"/>
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
<Brush x:Key="ItemStroke">#FFD69436</Brush>
<LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FAFBE9" Offset="0" />
<GradientStop Color="Orange" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Code behind:
// Implements ItemsControl for ToolboxItems
public class Toolbox : ItemsControl
{
// Defines the ItemHeight and ItemWidth properties of
// the WrapPanel used for this Toolbox
public Size ItemSize
{
get { return itemSize; }
set { itemSize = value; }
}
private Size itemSize = new Size(50, 50);
// Creates or identifies the element that is used to display the given item.
protected override DependencyObject GetContainerForItemOverride()
{
return new ToolboxItem();
}
// Determines if the specified item is (or is eligible to be) its own container.
protected override bool IsItemItsOwnContainerOverride(object item)
{
return (item is ToolboxItem);
}
}
// Represents a selectable item in the Toolbox/>.
public class ToolboxItem : ContentControl
{
…
}
public class ToolboxDataItem : DependencyObject
{
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register( "Title", typeof( string ),
typeof(ToolboxDataItem), new UIPropertyMetadata(""));
public ToolboxDataItem(string title)
{
Title = title;
}
}
public partial class DesignerCanvas : Canvas
{
private ObservableCollection<ToolboxDataItem> toolboxDataItems = new ObservableCollection<ToolboxDataItem>();
public ObservableCollection<ToolboxDataItem> ToolboxDataItems
{
get { return toolboxDataItems; }
}
public DesignerCanvas()
{
ToolboxDataItem toolboxDataItem = new ToolboxDataItem("123");
ToolboxDataItems.Add(toolboxDataItem );
toolboxDataItem = new ToolboxDataItem("456");
ToolboxDataItems.Add(toolboxDataItem );
}
}
MyDesigner:
<s:DesignerCanvas Focusable="true" x:Name="MyDesigner"
Background="{StaticResource WindowBackgroundBrush}" FocusVisualStyle="{x:Null}"
ContextMenu="{StaticResource DesignerCanvasContextMenu}"/>
So I started by trying to get an app going with the code you shared but the styles were all in an incorrect order, so after the styles were set correctly I got arround to an example like this:
<Window.Resources>
<ResourceDictionary>
<Brush x:Key="ItemStroke">#FFD69436</Brush>
<LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FAFBE9" Offset="0" />
<GradientStop Color="Orange" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="FlowChartItemStyle" TargetType="Path">
<Setter Property="Fill" Value="{StaticResource ItemBrush}"/>
<Setter Property="Stroke" Value="{StaticResource ItemStroke}"/>
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
<Style x:Key="Process" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
<Setter Property="Data" Value="M 0,0 H 60 V40 H 0 Z"/>
</Style>
<DataTemplate x:Key="toolboxItemTemplate">
<Grid Margin="5,5,5,5">
<Path Style="{StaticResource Process}">
</Path>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Title}" IsHitTestVisible="False" FontWeight="Bold"/>
</Grid>
</DataTemplate>
<Style x:Key="Process_DragThumb" TargetType="Path" BasedOn="{StaticResource Process}">
<Setter Property="IsHitTestVisible" Value="true"/>
<Setter Property="Fill" Value="Transparent"/>
<Setter Property="Stroke" Value="Transparent"/>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<ItemsControl Background="Yellow"
ItemsSource="{Binding ToolboxDataItems}"
ItemTemplate="{StaticResource toolboxItemTemplate}"
SnapsToDevicePixels="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</ItemsControl>
</Grid>
So if you check this example to yours then your problem might be in one of two places:
1) The Text binding of the TextBlock (notice the space before the {):
2) Or the Path inside the ItemsSource binding of the toolbox
<s:Toolbox x:Key="FlowChartStencils" ItemsSource="{Binding ElementName=MyDesigner, Path=ToolboxDataItems}" ItemTemplate="{StaticResource toolboxItemTemplate}" ItemSize="190,150" SnapsToDevicePixels="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
Here try something like ItemsSource="{Binding ToolboxDataItems, ElementName=MyDesigner}"
Related
I bound ViewScale to Grid's ScaleTransform and when the app starts it correctly scales by 2. But when I change ViewScale by pressing F12, it doesn't trigger ScaleTransform update even though the property value is changed.
Here is the code:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace test
{
public partial class MainWindow : Window
{
public event PropertyChangedEventHandler PropertyChanged;
protected void SetField<T> ( ref T field, T value, string propertyName )
{
if ( !EqualityComparer<T>.Default.Equals ( field, value ) )
{
field = value;
PropertyChanged?.Invoke ( this, new PropertyChangedEventArgs ( propertyName ) );
}
}
decimal viewScale = 2;
public decimal ViewScale
{
get => this.viewScale;
set => SetField ( ref this.viewScale, value,
"ViewScale"
);
}
ObservableCollection<Coin> _coins;
public ObservableCollection<Coin> Coins { get => _coins; set => SetField ( ref _coins, value, nameof ( _coins ) ); }
public ICollectionView CollectionView;
public MainWindow ( )
{
this.Coins = new ObservableCollection<Coin> ( );
for ( int i = 0 ; i < 100 ; ++i )
this.Coins.Add ( new Coin ( "Coin 1", i ) );
this.DataContext = this;
InitializeComponent ( );
this.PreviewKeyDown += MainWindow_PreviewKeyDown;
}
void MainWindow_PreviewKeyDown ( object sender, KeyEventArgs e )
{
Console.WriteLine ( e.Key );
if ( e.Key == Key.Home )
{
this.dataGrid.ScrollIntoView ( this.dataGrid.Items [ this.dataGrid.Items.Count - 1 ] );
this.dataGrid.UpdateLayout ( );
this.dataGrid.ScrollIntoView ( this.dataGrid.Items [ 0 ] );
}
else if ( e.Key == Key.F12 )
{
this.ViewScale += 0.1m;
}
}
void MainWindow_KeyDown ( object sender, KeyEventArgs e )
{
}
}
public class Coin
{
public string Symbol { get; set; }
public int PNL { get; set; }
public SolidColorBrush Color2 { get; set; }
public Coin ( string symbol, int pnl )
{
this.Symbol = symbol;
this.PNL = pnl;
Random rnd = new Random ( );
Color c = Color.FromRgb ( ( byte ) rnd.Next ( 256 ), ( byte ) rnd.Next ( 256 ), ( byte ) rnd.Next ( 256 ) );
this.Color2 = new SolidColorBrush ( c );
}
}
}
XAML:
<Window x:Class="test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:test"
mc:Ignorable="d"
Name="myMainWindow"
SizeToContent="Width"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
Title="Profit Tracker"
WindowStyle="None"
Topmost="True"
Height="426">
<Window.Resources>
<Style x:Key="DataGridColumnSeparatorStyle" TargetType="DataGridCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Rectangle VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="#1e90ff"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DataGridColumnAlarmStyle" TargetType="DataGridCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Rectangle VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="#000000"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type DataGrid}">
<Setter Property="Background" Value="#FFF" />
<Setter Property="AlternationCount" Value="2" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="RowStyleWithAlternation" TargetType="DataGridRow">
<Setter Property="Background" Value="#141414"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="Normal"/>
<Style.Triggers>
<Trigger Property="AlternationIndex" Value="0">
<Setter Property="Background" Value="#141414"/>
</Trigger>
<Trigger Property="AlternationIndex" Value="1">
<Setter Property="Background" Value="#282828"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Margin" Value="-1,0,0,0" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<!--<Setter Property="BorderBrush" Value="#2eff00" />
<Setter Property="BorderThickness" Value="1" />-->
<Setter Property="Background" Value="Orange"/>
<!--<Setter Property="Margin" Value="-1,0,0,0" />-->
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="DataGridCell">
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Stretch"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="#1e90ff" />
<Setter Property="BorderThickness" Value="1" />
<!--<Setter Property="Background" Value="Red"/>-->
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Column.DisplayIndex, RelativeSource={RelativeSource Self}}" Value="4"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="VerticalAlignment" Value="Stretch"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderThickness="1" Background="#006400" CornerRadius="0" Padding="0">
<Grid x:Name="PART_Track">
<Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#75001D" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<CollectionViewSource Source="{Binding Coins}" IsLiveSortingRequested="True" x:Key="MyKey" />
</Window.Resources>
<Grid>
<Grid.LayoutTransform>
<ScaleTransform ScaleX="{Binding ViewScale, ElementName=myMainWindow}" ScaleY="{Binding ViewScale, ElementName=myMainWindow}" />
</Grid.LayoutTransform>
<DataGrid Name="dataGrid" ItemsSource="{Binding Source={StaticResource MyKey}}" SelectionMode="Single" GridLinesVisibility="None" HorizontalScrollBarVisibility="Hidden" RowHeaderWidth="0" IsReadOnly="True" CanUserAddRows="False" CanUserResizeColumns="False" CanUserResizeRows="False" AutoGenerateColumns="False" RowStyle="{StaticResource RowStyleWithAlternation}">
<DataGrid.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn MinWidth="0" Width="2" CellStyle="{StaticResource DataGridColumnSeparatorStyle}"/>
<DataGridTextColumn Header="PNL" Width="60" SortMemberPath="Balance.UnitPrice" Binding="{Binding Path=PNL}" />
<DataGridTemplateColumn MinWidth="0" Width="2" CellStyle="{StaticResource DataGridColumnSeparatorStyle}" CanUserSort="False"/>
<DataGridTemplateColumn Header="Price" Width="60" SortMemberPath="Price">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid>
<Border BorderBrush="#241C59" BorderThickness="1" CornerRadius="1" Background="#2D255B">
<Border BorderBrush="#206fb6" BorderThickness="4" CornerRadius="2" ClipToBounds="True" Margin="-1" HorizontalAlignment="Stretch">
<Border.Effect>
<BlurEffect Radius="10"/>
</Border.Effect>
</Border>
</Border>
<Border Margin="1" VerticalAlignment="Stretch" BorderThickness="0." Background="#69ABDB" HorizontalAlignment="Left" Width="30">
<Border BorderBrush="#38e2ff" BorderThickness="2" CornerRadius="2" ClipToBounds="False">
<Border.Effect>
<BlurEffect Radius="5"/>
</Border.Effect>
</Border>
</Border>
</Grid>
<TextBlock Text="25%" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Vol BTC/h" Width="30" SortMemberPath="LastHourVolumeInBtc">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="ABCDE" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Vol BTC/h" Width="40">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<ProgressBar Value="0.3" Minimum="0" Maximum="1"/>
<TextBlock Text="12345" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Net BTC/m" Width="60"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
In order to provide property changed notifications, you have to implement the INotifyPropertyChanged interface in the type that the bound property is defined. You missed this part in your MainWindow code-behind, which is also the data context of your window.
public partial class MainWindow : Window, INotifyPropertyChanged
Although you defined the PropertyChanged event and your SetField method raises the event correctly, WPF will not be aware of it, if you do not declare the interface on your class definition.
I have a button style. I can't change CornerRadius for Border, what is in Template.
Style:
<Style TargetType="Button" x:Key="Circle">
<Setter Property="Background" Value="#373737"/>
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Bord1" CornerRadius="20" Background="{TemplateBinding Background}">
<Grid>
<TextBlock Name="tx" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="{TemplateBinding FontSize}" Foreground="White"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#EBEBEB" />
<Setter TargetName="tx" Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#F3F3F3" Offset="0.35"/>
<GradientStop Color="#FFC9C7BA" Offset="0.95"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="tx" Property="RenderTransform" >
<Setter.Value>
<TranslateTransform Y="1.0" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I wrote this code, but it does not help me.
Style A = Application.Current.Resources["Circle"] as Style;
Setter A1 = (Setter)A.Setters[2];
ControlTemplate C1 = (ControlTemplate)A1.Value;
Border B = (Border)C1.LoadContent();
B.SetValue(Border.CornerRadiusProperty, new CornerRadius(2));
You can use your style like this:
Change the Fixed Cornerradius in your Template to a Template Binding
Create a new Class like:
public class MyButton : Button {
public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register(
"CornerRadius", typeof(CornerRadius), typeof(MyButton), new PropertyMetadata(default(CornerRadius)));
public CornerRadius CornerRadius {
get { return (CornerRadius) GetValue(CornerRadiusProperty); }
set { SetValue(CornerRadiusProperty, value); }
}
}
use the class like this in your style and xaml:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="{Binding Path=Content.Title, ElementName=MainFrame}" Height="450" Width="800">
<Window.Resources>
<Style TargetType="local:MyButton" x:Key="Circle">
<Setter Property="Background" Value="#373737"/>
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyButton">
<Border Name="Bord1" CornerRadius="{TemplateBinding CornerRadius}" Background="{TemplateBinding Background}">
<Grid>
<TextBlock Name="tx" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="{TemplateBinding FontSize}" Foreground="White"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#EBEBEB" />
<Setter TargetName="tx" Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#F3F3F3" Offset="0.35"/>
<GradientStop Color="#FFC9C7BA" Offset="0.95"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="tx" Property="RenderTransform" >
<Setter.Value>
<TranslateTransform Y="1.0" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel>
<local:MyButton Style="{StaticResource Circle}" CornerRadius="10"></local:MyButton>
</StackPanel>
</Window>
UPDATE:
Or you can Change the CornerRadius for your Border programatically like:
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
Loaded += WasLoaded;
}
private void WasLoaded(object sender, RoutedEventArgs e) {
var children = VisualTreeHelper.GetChildrenRecursive(Button1);
foreach (var child in children.OfType<Border>()) {
if (child.Name == "Bord1") {
child.CornerRadius = new CornerRadius(1);
break;
}
}
}
}
public static class VisualTreeHelper {
/// <summary>
/// Enumerates through element's children in the visual tree.
/// </summary>
public static IEnumerable<DependencyObject> GetChildrenRecursive(this DependencyObject element) {
if (element == null) {
throw new ArgumentNullException("element");
}
for (var i = 0; i < System.Windows.Media.VisualTreeHelper.GetChildrenCount(element); i++) {
var child = System.Windows.Media.VisualTreeHelper.GetChild(element, i);
yield return child;
foreach (var item in child.GetChildrenRecursive()) {
yield return item;
}
}
}
}
I have a customized ComboBox to handle the text input and filter the itemsource. The problem I'm having is when I open the ComboBox the textBox is focused and let me write in it, then if I close and open it again, the TextBox is not focused and I cant write anything inside. I've discovered that the first time the comboBox is opening it is setting the focus on the TextBox but when I close it the TextBox keeps its IsFocused property true so when reopening the problem happens. It's just when opening and reopening clicking the comboBox because if I click outside the ComboBox to close it and then open it again everything works nice.
Here is the customized style I wrote and the ComboBox I'm using.
<Style x:Key="FilteringComboBox" TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="IsEditable" Value="True"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="FontFamily" Value="Coves"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Border x:Name="TopBorder"
CornerRadius="8"
BorderBrush="Grey"
BorderThickness="1"
Padding="10,0,1,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#e3e3e5" Offset="0.65"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<ToggleButton
Name="ToggleButton"
Template="{DynamicResource FilteringComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<TextBlock Name="ContentSite" IsHitTestVisible="False"
Text="{Binding Source={StaticResource Proxy}, Path=Data.Name, UpdateSourceTrigger=PropertyChanged}"
Visibility="Visible" Foreground="#37465c"
Padding="3,3,23,3" VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox" MaxWidth="215" MinWidth="100"
Text="{Binding Source={StaticResource Proxy}, Path=Data.FilterText, UpdateSourceTrigger=PropertyChanged}"
Foreground="#37465c"
HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3,3,23,3" Focusable="True" Background="Transparent"
Visibility="Collapsed"/>
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"
Focusable="False" PopupAnimation="Fade">
<StackPanel Orientation="Vertical" Width="215">
<Grid Name="DropDown" SnapsToDevicePixels="True"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderThickness="1"
BorderBrush="#888">
<Border.Background>
<LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#e3e3e5" Offset="0.65"/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer Margin="0" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
</ScrollViewer>
</Border>
</Grid>
</StackPanel>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsDropDownOpen" Value="True"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" />
<Setter TargetName="ContentSite" Property="Visibility" Value="Collapsed" />
<Setter Property="IsEditable" Value="True"/>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="False">
<Setter Property="IsDropDownOpen" Value="False"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Collapsed" />
<Setter TargetName="ContentSite" Property="Visibility" Value="Visible" />
<Setter Property="Text" Value=""/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I tried adding this event handler to remove the focus but it isn't working
private static void QuantityBox_IsMouseCapturedWithin(object sender, DependencyPropertyChangedEventArgs e)
{
var qBox = sender as ComboBox;
if (qBox.IsDropDownOpen == false)
{
Keyboard.ClearFocus();
flag = true;
}
}
Hope that this helps someone, the erratic behaviour was happening because I was using these triggers:
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsDropDownOpen" Value="True"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" />
<Setter TargetName="ContentSite" Property="Visibility" Value="Collapsed" />
<Setter Property="IsEditable" Value="True"/>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="False">
<Setter Property="IsDropDownOpen" Value="False"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Collapsed" />
<Setter TargetName="ContentSite" Property="Visibility" Value="Visible" />
<Setter Property="Text" Value=""/>
</Trigger>
The triggers were ment to handle the visibility toggle between the TexBlock and the TextBox (showing the TextBlock when the ComboBox was inactive and the TextBox when it is focused so the user can type and filter).
So I removed the triggers and handled that behaviour in a dependency property:
public static readonly DependencyProperty MouseCapturedProperty = DependencyProperty.RegisterAttached("MouseCaptured",
typeof(bool), typeof(QuantitiesBoxBehaviours),
new UIPropertyMetadata(false, MouseCapturedPropertyChangedCallback));
public static bool GetMouseCaptured(UIElement element)
{
return (bool)element.GetValue(MouseCapturedProperty);
}
public static void SetMouseCaptured(UIElement element, bool command)
{
element.SetValue(MouseCapturedProperty, command);
}
private static void MouseCapturedPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var qBox = d as ComboBox;
bool value = GetMouseCaptured(qBox);
if (qBox != null && value)
{
qBox.IsMouseCaptureWithinChanged += QBox_IsMouseCaptureWithinChanged;
qBox.DropDownOpened += QBox_DropDownOpened;
}
}
private static void QBox_DropDownOpened(object sender, EventArgs e)
{
var qBox = sender as ComboBox;
var template = qBox.Template;
var txtBox = template.FindName("PART_EditableTextBox", qBox) as TextBox;
var txtBlock = template.FindName("ContentSite", qBox) as TextBlock;
txtBlock.Visibility = Visibility.Collapsed;
txtBox.Visibility = Visibility.Visible;
}
private static void QBox_IsMouseCaptureWithinChanged(object sender, DependencyPropertyChangedEventArgs e)
{
var qBox = sender as ComboBox;
var template = qBox.Template;
var txtBox = template.FindName("PART_EditableTextBox", qBox) as TextBox;
var txtBlock = template.FindName("ContentSite", qBox) as TextBlock;
if (qBox.IsDropDownOpen == false)
{
Keyboard.ClearFocus();
txtBox.Visibility = Visibility.Collapsed;
txtBlock.Visibility = Visibility.Visible;
qBox.ItemsSource = _presentationQuantities;
flag = true;
}
}
That solved the problem and now it's working great, that property was set to the ComboBox.
I'm making a periodic table of elements wpf application and have made my buttons like this:
<!-- RoundedButton.xaml -->
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle SnapsToDevicePixels="true" Margin="4" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RoundedButton" TargetType="{x:Type Button}" x:Name="butt">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0,0,1,1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="12,12,12,12" BorderThickness="3,3,3,3" RenderTransformOrigin="0.5,0.5" x:Name="border" BorderBrush="Transparent">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Border.RenderTransform>
<Border Background="{TemplateBinding Background}" CornerRadius="12,12,12,12" x:Name="bordertrue">
<Grid>
<Border Opacity="0" x:Name="Shine" Width="Auto" Height="Auto" CornerRadius="12,12,10,10" Margin="0,0,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Indigo" Offset="0"/>
<GradientStop Color="Crimson" Offset="0.5"/>
<GradientStop Color="Crimson" Offset="0.5"/>
<GradientStop Color="Indigo" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<ContentPresenter VerticalAlignment="Center" Grid.RowSpan="2" HorizontalAlignment="Center" x:Name="contentPresenter"/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="border" Value="1"/>
<Setter Property="Opacity" TargetName="contentPresenter" Value="0.5"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="RenderTransform" TargetName="border">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" TargetName="Shine" Value="1"/>
<Setter Property="BorderBrush" TargetName="border" Value="Gold"/>
<Setter Property="Foreground" Value="Gold" />
<Setter Property="FontWeight" Value="ExtraBold"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And this is working perfectly on mouseover. However in my app I have a combination of textbox and listbox which makes me a searchbox. Whenever I search for a particular element I wish to make the same "Shine button" effect as on mouseover in style above
I've tried to do it like this:
private void highlight(string elementName, bool MultiOrSingle)
{
LinearGradientBrush gradient1 = new LinearGradientBrush();
gradient1.StartPoint = new Point(0.5, 0);
gradient1.EndPoint = new Point(0.5, 1);
gradient1.GradientStops.Add(new GradientStop(Colors.Indigo, 0));
gradient1.GradientStops.Add(new GradientStop(Colors.Crimson, 0.5));
gradient1.GradientStops.Add(new GradientStop(Colors.Crimson, 0.5));
gradient1.GradientStops.Add(new GradientStop(Colors.Indigo, 1));
if (MultiOrSingle == true)
{
foreach (Button elementButton in VisualChildren.FindVisualChildren<Button>(this))
{
if (listBox.Items.Contains(elementButton.Name) == true)
{
elementButton.Background = gradient1;
elementButton.FontWeight = FontWeights.Bold;
elementButton.Foreground = Brushes.Gold;
elementButton.BorderBrush = Brushes.Gold;
}
else
{
elementButton.Background = previousBackgroundColors[elementButton.Name];
elementButton.Foreground = previousForegroundColors[elementButton.Name];
}
}
foreach (Button elementButton in VisualChildren.FindVisualChildren<Button>(this))
{
if (elementButton.Name != "play_quiz" &&
elementButton.Name != "show_scoreboard" &&
elementButton.Name != "update" &&
elementButton.Name != "DragDropGames" &&
listBox.Items.Contains(elementButton.Name) == false)
{
elementButton.Background = Brushes.Gainsboro;
elementButton.BorderBrush = Brushes.DarkBlue;
elementButton.FontWeight = FontWeights.Normal;
elementButton.Foreground = Brushes.Black;
}
}
}
else
{
foreach (Button elementButton in VisualChildren.FindVisualChildren<Button>(this))
{
if (elementName == elementButton.Name)
{
elementButton.Background = gradient1;
elementButton.BorderBrush = Brushes.Gold;
elementButton.FontWeight = FontWeights.Bold;
elementButton.Foreground = Brushes.Gold;
}
else
{
elementButton.Background = previousBackgroundColors[elementButton.Name];
elementButton.Foreground = previousForegroundColors[elementButton.Name];
}
}
foreach (Button elementButton in VisualChildren.FindVisualChildren<Button>(this))
{
if (elementButton.Name != "play_quiz" &&
elementButton.Name != "show_scoreboard" &&
elementButton.Name != "update" &&
elementButton.Name != "DragDropGames" &&
elementName != elementButton.Name)
{
elementButton.Background = Brushes.Gainsboro;
elementButton.BorderBrush = Brushes.DarkBlue;
elementButton.FontWeight = FontWeights.Normal;
elementButton.Foreground = Brushes.Black;
}
}
}
with just setting backgrounds brushes etc etc....
However I encountered 2 problems. When doing this in code behind i can change everything but my border brush will remain as it is determined in xaml style I can't change it in code behind don't know why? And after calling this function when I mouse over the buttons they will Shine...however property foreground won't be changed to gold? It will remain black
to demonstrate :
So this is my mouseover "Shine". When I go with mouse over the button it will change it's look like this
So this is my problem I have searched for H..it came back with few results and called function from above as "multi" and selected all results
However this didn't work "elementButton.BorderBrush = Brushes.Gold" it remained transparent as in xaml. And suddenly my Mouseover shine is not the same anymore it's
<Setter Property="Foreground" Value="Gold" />
<Setter Property="FontWeight" Value="ExtraBold"/>
don't seem to be triggering after the function call
To sum it up. I would like to have the same look of the button and shine effect for all my textbox searches
Your Trigger changes the BorderBrush on element named "Border". However in your code behind you are setting the BorderBrush on the button, which does nothing because you don't use the property BorderBrush anywhere in your template. What you need to do is TemplateBinding the Button's BorderBrush property to the template, like the following:
<Border CornerRadius="12,12,12,12"
BorderThickness="3,3,3,3"
RenderTransformOrigin="0.5,0.5"
x:Name="border"
BorderBrush="{TemplateBinding BorderBrush}">
In order to get the FontWeight and Foreground to trigger when the mouse is over the button when properties is set in code behind, one possible solution is the following.
Set the TextBlock property in the ContentPresenter and then use TemplateBinding to set the value.
<ContentPresenter TextBlock.Foreground="{TemplateBinding Foreground}"
TextBlock.FontWeight="{TemplateBinding FontWeight}"
VerticalAlignment="Center"
Grid.RowSpan="2"
HorizontalAlignment="Center"
x:Name="contentPresenter"/>
<Setter Property="TextBlock.Foreground" TargetName="contentPresenter" Value="White" />
<Setter Property="TextBlock.FontWeight" TargetName="contentPresenter" Value="ExtraBold"/>
i want to design a flexible imagebutton in wpf.
first,i create a WPF Custom Control Library in nameSpace 'ImageButton' like below:
namespace ImageButton
{
public class ImageButton : Button
{
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
}
#region DisplayMode
[System.ComponentModel.Category("ImageButton")]
public ImageDisplayMode DisplayMode
{
get { return (ImageDisplayMode)GetValue(DisplayModeProperty); }
set { SetValue(DisplayModeProperty, value); }
}
public static readonly DependencyProperty DisplayModeProperty =
DependencyProperty.Register("DisplayMode", typeof(ImageDisplayMode), typeof(ImageButton), new FrameworkPropertyMetadata(ImageDisplayMode.ImageAboveText), displaymodevalidate);
public static bool displaymodevalidate(object value)
{
return value is ImageDisplayMode;
}
#endregion
}
}
in the namespace "ImageButton" i define a enum named 'ImageDisplayMode' like below:
public enum ImageDisplayMode
{
ImageAboveText = 1,
TextAboveImage = 2,
ImageBeforeText = 3,
TextBeforeImage = 4
}
and the Generic.xaml file modified like below:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ImageButton">
<Style x:Name="style1" TargetType="{x:Type local:ImageButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ImageButton}">
<Button Background="Transparent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Grid.ColumnSpan="2" Name="img1" Width="{TemplateBinding ImageWidth}" Stretch="{TemplateBinding ImageStretch}" Height="{TemplateBinding ImageHeight}" Source="{TemplateBinding Image}"/>
<TextBlock Grid.ColumnSpan="2" Grid.Row="1" Name="lbl1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Text="{TemplateBinding Text}"/>
</Grid>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
the result of above code is below figure:
[Image]
Text
i want:
when i change the value of 'DisplayMode' property of imagebutton,for each possible value ,control changes to below forms:
1-------------------------------------
[Image]
Text
2-------------------------------------
Text
[Image]
3-------------------------------------
[Image]Text
4--------------------------------------
Text[Image]
i guess ,i must define trigger in the grid in Generic.xaml codes like below:
<Grid.Triggers>
<Trigger Property="DisplayMode" Value="2">
<Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
<Setter Property="Grid.Row" TargetName="img1" Value="1"/>
</Trigger>
</Grid.Triggers>
please tell me :
How can i do it?
Thank you Very Much
Add the triggers to your style (i.e. <Style.Triggers>...</Style.Triggers>).
I.e. something like this:
<Style.Triggers>
<Trigger Property="DisplayMode" Value="2">
<Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
<Setter Property="Grid.Row" TargetName="img1" Value="1"/>
</Trigger>
</Style.Triggers>
thanks fmunkert ...
I move my triggers to ControlTemplate.Triggers and change Trigger.Value from "2" to "ImageAboveText" ( one of my custom enum items ) like below:
Before Edit:
<Trigger Property="DisplayMode" Value="2">
<Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
<Setter Property="Grid.Row" TargetName="img1" Value="1"/>
</Trigger>
After Edit:
<Trigger Property="DisplayMode" Value="ImageAboveText">
<Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
<Setter Property="Grid.Row" TargetName="img1" Value="1"/>
</Trigger>
my problem solved successfully....
Thank you.