Databinding property from wpf style to viewmodel - c#

I have an application that uses two separate projects. One is for the main executable which contains my ViewModels and the other is to control the theme/style of the application.
In the theme project, I have customized the DataGridColumnHeader's Style to include a CheckBox. Now how do I databind the CheckBoxes to my ViewModel?
My theme xaml
<Style x:Key='PlottableFilteringColumnHeaderStyle' TargetType='{x:Type primitives:DataGridColumnHeader}'>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type primitives:DataGridColumnHeader}">
<Grid>
<themes:DataGridHeaderBorder x:Name='HeaderBorder'>
<Grid x:Name="GridColumnHeader">
<StackPanel x:Name="argStackPanel">
<CheckBox x:Name="argCheckBox" Content="Enable Arg" Style="{DynamicResource ResourceKey=DefaultCheckBox}" />
</StackPanel>
</Grid>
</themes:DataGridHeaderBorder>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am then using MultiBinding for the argCheckBox
public class HeaderArgConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string headerText = values[0] as string;
if (!String.IsNullOrWhiteSpace(headerText))
{
FrameworkElement targetElement = values[1] as FrameworkElement;
DataGridColumnHeader header = targetElement.TemplatedParent as DataGridColumnHeader;
string columnName = header.DataContext != null ? header.DataContext.ToString() : "";
var argNumber = System.Text.RegularExpressions.Regex.Match(columnName.Split(':')[0], #"\d+$").Value; // use the header text to determine which arg number
Binding binding = new Binding("SelectedViewModel.EnableArg" + argNumber);
binding.Source = Window.DataContextProperty; // This is what I am unsure about
(targetElement as CheckBox).SetBinding(CheckBox.IsCheckedProperty, binding);
}
}
}
I keep getting 'BindingExpression path error: property not found on 'object'' error. Any ideas on how to fix this or if there is a better way to do this?

Related

WPF MVVM: Postpone rendering of View until DataContext is set

In our MVVM application, in a View, DataContext is initially null and is set later.
The View is first rendered without the DataContext set, so for bindings the default or FallbackValues are used. This causes a lot of changes in the UI once the DataContext is set and all bindings are updated. The UI is a bit 'bouncy' and I can imaging that quite a few CPU cycles are wasted.
Is there a way to postpone rendering of the View until the DataContext is set?
Our code to find a View for a ViewModel:
<ContentControl
DataContext="{Binding Viewodel}"
Content="{Binding}"
Template="{Binding Converter={converters:ViewModelToViewConverter}}"/>
ViewModelToViewConverter.cs:
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
ViewModel viewModel = value as ViewModel;
if (viewModel == null)
{
return null;
}
string modelName = viewModel.ToString();
string mappingId = viewModel.MappingId;
if (!string.IsNullOrEmpty(mappingId))
{
modelName += "_" + mappingId;
}
ControlTemplate controlTemplate = new ControlTemplate();
MappingEntry mappingEntry = ApplicationStore.SystemConfig.GetMappingEntryOnModelName(modelName); // lookup View definition for ViewModel
Type type = mappingEntry != null ? mappingEntry.ViewType : null;
if (type != null)
{
controlTemplate.VisualTree = new FrameworkElementFactory(type);
}
else
{
Logger.ErrorFormat("View not found: {0}", modelName);
}
return controlTemplate;
}
Yes, you can do that
Using FrameworkElement.DataContextChanged event.
Using Trigger.
Schematic sample eg;
<ContentControl>
<ContentControl.Resources>
<DataTemplate x:Key="MyTmplKey">
<TextBlock Text="Not null"/>
</DataTemplate>
<DataTemplate x:Key="DefaultTmplKey">
<StackPanel>
<TextBlock Text="null"/>
<Button Content="Press" Click="Button_Click_1"/>
</StackPanel>
</DataTemplate>
</ContentControl.Resources>
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="ContentTemplate" Value="{StaticResource MyTmplKey}"/>
<Style.Triggers>
<Trigger Property="DataContext" Value="{x:Null}">
<Setter Property="ContentTemplate" Value="{StaticResource DefaultTmplKey}"/>
</Trigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>

Get datagridcell by value

I have a datagrid, which is bound to a datatable, each cell has a unique value, so no two cells have the same value.
I want to change the cell with the value 1 (int32) to the color green. Note, the value of 1 is dynamic, thats just an example, it could be between 1-90.
I have searched around, and most of the help gives you the value of either a cell based on its coordinates i.e. (4,2) or the selected cell. This isn't what I want, I want to change the color of a cell based on its value.
Is there a way to do this, for example in JavaScript i would simply assign each cell an id equivalent to its value and then something like $('#' + 1).css('background-color:green;') (note: this might not be correct syntax, but you get the picture). Is there a way as simple as this or a standard way of doing this?
My datagrid
<DataGrid Name="grid" ItemsSource="{Binding}" Height="300" Width="900"
AutoGenerateColumns="True"
VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Center" VerticalAlignment="Top" RowHeight="40">
<DataGrid.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</DataGrid.ItemsPanel>
</DataGrid>
Table creation
DataSet dataSet = new DataSet("myDS");
DataTable numbersTable = new DataTable("Numbers");
numbersTable.Columns.Add("Number", typeof(Int32));
for (int i = 1; i < 91; i++)
{
numbersTable.Rows.Add(i);
}
dataSet.Tables.Add(numbersTable);
grid.DataContext = numbersTable.DefaultView;
Please take a look on this Change DataGrid cell colour based on values
Public class NameToBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string input = value as string;
switch (input)
{
case "John":
return Brushes.LightGreen;
default:
return DependencyProperty.UnsetValue;
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotSupportedException();
}
}
Grid:
<DataGridTextColumn Binding="{Binding Name}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Background" Value="{Binding Name, Converter={StaticResource NameToBrushConverter}}"/>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
Brushs:
public string Name
{
get { return _name; }
set
{
if (_name != value)
{
_name = value;
OnPropertyChanged("Name");
OnPropertyChanged("NameBrush");
}
}
}
public Brush NameBrush
{
get
{
switch (Name)
{
case "John":
return Brushes.LightGreen;
}
return Brushes.Transparent;
}
}
There are a few ways that you can achieve your requirements. It's a little bit inconvenient because we have to apply a Style with a Trigger on the columns of the DataGrid rather than the DataGrid itself. This means that you can't use the AutoGenerateColumns feature and you'll have to define them all manually as I have below. Try this:
<DataGrid ItemsSource="{Binding YourItems}" AutoGenerateColumns="False">
<DataGrid.Resources>
<Style x:Key="BackgroundColourStyle" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="Text" Value="1">
<Setter Property="Background" Value="LightGreen" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding YourPropertyName}"
ElementStyle="{StaticResource BackgroundColourStyle}">
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
UPDATE >>>
Ok, so to do this with a variable value, you'd be better off doing this the WPF data-centric way. As usual in WPF, we want to create data objects with all of the properties that we need to display in the UI. As such, you'd need to add a new bool property into whatever data type class that you are displaying in the DataGrid... maybe add a new column for that if you insist on using a DataTable.
However, I'd advise you to use a class and if you create one, you must ensure that you implement the INotifyPropertyChanged interface correctly in it. You could add properties into it like this:
public int NumberValue { get; set; } // implement `INotifyPropertyChanged` here
public bool HasHighlightValue { get; set; } // implement `INotifyPropertyChanged` here
Then we could use this property to highlight the relevant cell in the DataGrid:
<Style x:Key="BackgroundColourStyle" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="HasHighlightValue" Value="True">
<Setter Property="Background" Value="LightGreen" />
</Trigger>
</Style.Triggers>
</Style>
Finally, you can set this new property in a handler or code behind in response to some user action:
// reset previous cell value
YourDataType previousItem = YourItems.Where(I => i.HasHighlightValue).Single();
previousItem.HasHighlightValue = false;
// set new cell value
YourDataType item = YourItems.Where(I => i.NumberValue == relevantNumber).Single();
item.HasHighlightValue = true;
There is also following way which you can use to dynamically format DataGridCell whenever its value changes by using Binding.TargetUpdated or Binding.SourceUpdated event on DataGridCell.
To do this, you must do following:
Add event handler for AutoGeneratingColumn event on DataGrid.
For example:
<DataGrid ItemsSource="{Binding}" AutoGeneratingColumn="OnAutoGeneratingColumn"/>
In AutoGeneratingColumn handler identify if auto-generated column has Binding and if so, set NotifyOnTargetUpdated on it to true and set CellStyle on column which will include EventSetter for Binding.TargetUpdatedEvent event. For example:
void OnAutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
BindingBase bindingBase = null;
var dataGridBoundColumn = e.Column as DataGridBoundColumn;
if (dataGridBoundColumn != null)
{
bindingBase = dataGridBoundColumn.Binding;
}
else
{
var dataGridComboBoxColumn = e.Column as DataGridComboBoxColumn;
if (dataGridComboBoxColumn != null)
bindingBase = dataGridComboBoxColumn.SelectedItemBinding;
}
var binding = bindingBase as Binding;
if (binding != null)
{
binding.NotifyOnTargetUpdated = true;
e.Column.CellStyle = new Style(typeof(DataGridCell))
{
Setters =
{
new EventSetter(Binding.TargetUpdatedEvent, new EventHandler<DataTransferEventArgs>(OnDataGridCellBindingTargetUpdated))
}
};
}
}
Implement your custom logic for formatting DataGridCell when value changes in OnDataGridCellBindingTargetUpdated handler. For example:
private static void OnDataGridCellBindingTargetUpdated(object sender, DataTransferEventArgs e)
{
var dataGridCell = (DataGridCell)sender;
// Get context: column and item.
var column = dataGridCell.Column;
var item = dataGridCell.DataContext;
// TODO: based on context, format DataGridCell instance.
}

How to create an array of labels in wpf?

I am trying to simulate LED indicators in my WPF App (around 16). I get 2 bytes from serial port, and based on the bits, I need to turn ON/OFF the LED indicators on my App window.
Example: 0xFF, 0xFE => all but the last LED are ON.
I am using labels with a dark background color to indicate an OFF LED, and a bright background color for an ON LED.
If I have an array of labels, then I could possibly do something like this:
for(i = 0; i < 16; i++)
{
if(bitArray[i] == true)
lblLED[i].Background = Brushes.Pink;
else
lblLED[i].Background = Brushes.Maroon;
}
Any suggestions on whats the best way to do this? A sample code which can show how this would work will be helpful. Thanks!
I'm sure you could figure out how to do what you're asking, but let's consider the tools at hand? You have an array of bool, it seems. As was suggested, an ItemsControl can handle them just wonderfully. First, let's do some code-behind to transform our bool's into brushes to set the background of our items.
using System;
using System.Windows.Media;
using System.Windows.Data;
using System.Globalization;
namespace MyNamespace
{
public class BoolToBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
// return a Pink SolidColorBrush if true, a Maroon if false
return (bool)value ? Brushes.Pink : Brushes.Maroon;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return (SolidColorBrush)value == Brushes.Pink;
}
}
}
This will allow you to translate your bool[] bitArray into a series of brushes when bound to an ItemsControl. Now for some Xaml :
First, make sure you declare your local namespace (which contains the converter we just defined) in the xmlns attributes as well as the System Core Library (see the xmlns attributes).
<Window x:Class="MyNamespace.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
<!-- our local namespace -->
xmlns:my="clr-namespace:MyNamespace"
<!-- system core library -->
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="600" Width="900">
<Grid>
<ItemsControl Name="LEDPanel"> <!-- Need to Name this Control in order to set the ItemsSource Property at startup -->
<ItemsControl.Resources>
<my:BoolToBrushConverter x:Key="LEDConverter" /> <!-- Here we define our converter for use, note the preceding my: namespace declaration -->
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" /> <!-- this will make the items defined in the ItemTemplate appear in a row -->
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type sys:Boolean}"> <-- We will be binding our ItemsControl to a bool[] so each Item will be bound to a bool -->
<Border Margin="3" CornerRadius="10" Height="20" Width="20" BorderThickness="2" BorderBrush="Silver" Background="{Binding Converter={StaticResource LEDConverter}}" />
<!-- This is where we describe our item. I'm drawing a round silver border and then binding the Background to the item's DataContext (implicit) and converting the value using our defined BoolToBrushConverter -->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Window>
Edit: I forgot the DataBinding. In your Window's constructor:
public MainWindow()
{
InitializeComponent();
LEDPanel.ItemsSource = bitArray;
}
The concepts covered are INotifyPropertyChanges (in .net 4.5 (minimal changes for other versions but same concept)), ItemsControl and finally style triggers.
INotifyPropertyChanges
My first step is to put INotifyPropertyChanges on our mainwindow to notify the WPF controls of any changes automatically. You will convert your bit array to a list and simply drop it in (maybe on a timer?) when needed. Note it doesn't matter how many there are...the control will expand.
public partial class MainWindow : Window, INotifyPropertyChanged
{
private List<bool> _LedStates;
public List<bool> LedStates
{
get { return _LedStates; }
set
{
_LedStates = value;
NotifyPropertyChanged();
}
}
public MainWindow()
{
InitializeComponent();
DataContext = this;
LedStates = new List<bool>() {true, false, true};
}
#region INotifyPropertyChanged
/// <summary>
/// Event raised when a property changes.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Raises the PropertyChanged event.
/// </summary>
/// <param name="propertyName">The name of the property that has changed.</param>
protected virtual void NotifyPropertyChanged( [CallerMemberName] String propertyName = "" )
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler( this, new PropertyChangedEventArgs( propertyName ) );
}
}
#endregion
}
ItemsControl & Style Triggers
Then in the WPF xaml we will bind to the list of bools and use an item template (think a generic mini view for each data item found). Within that template we will show a color of red or green depending on the state of the boolean.
No converter needed because we setup a style trigger which is attune to a target value. If the Textblocks text is "True" we will show Green and when "False" we will trigger/show red.
<Window x:Class="WPFBindToArray.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ItemsControl x:Name="icBitViewer"
ItemsSource="{Binding LedStates}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"
IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Grid.Column="0">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="Text" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
<Trigger Property="Text" Value="False">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Window>
When this program is run here is the result:
Try this. It's clearly just an example, I advice you to use the features of WPF and maybe use a different control than a Label.
Func<ushort, bool[]> getBits = s =>
{
var bools = new bool[sizeof (ushort)*8];
for (var i = 0; i < bools.Length; i++)
bools[i] = (s & 1 << i) > 0;
return bools;
};
var bits = getBits(2);
var labels = new Label[sizeof (ushort)*8];
for (var i = 0; i < labels.Length; i++)
{
var label = new Label {Background = bits[i] ? Brushes.Green : Brushes.Red};
labels[i] = label;
}
//Do something with the Label array

Separate text in a Textbox with a drawn line?

So here it goes, I making a c# project in wpf and im stuck at trying to make a text box with a line that separates text.
At the moment i got the textbox like this:
Instead of using "-------" i want to make a predefined line in the textbox. Is this possible ?
Agg. The textbox is editable in runtime
The drawn line should have the properties:
It should not be edit able !
It shouldn't only be an empty line
It should be a visible line that has the width line.width = box.width !
If you don't need a full textbox implementation then this might help. It's got real issues with not showing the cursor ect but might give you a start.
first add the following converter to your project.
public class TextLineConverter : MarkupExtension, IValueConverter
{
static TextLineConverter converter;
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string[] results = null;
string newText = value as string;
if (newText != null)
{
results = newText.Split('\r');
if (results.Length > 0)
for (int i = 0; i < results.Length; i++)
if (results[i].Length > 0)
if (results[i][0] == '\n')
results[i] = results[i].Substring(1, results[i].Length - 1);
}
return results;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
public override object ProvideValue(IServiceProvider serviceProvider)
{
if (converter == null) converter = new TextLineConverter();
return converter;
}
public TextLineConverter()
{
}
}
And the following style.
<Style TargetType="TextBox">
<Style.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="IsEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="Black" >
<ContentPresenter Content="{Binding}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<ListView Focusable="False" ItemsSource="{Binding Text, Converter={local:TextLineConverter}, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource TemplatedParent}}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On rereading your question, i believe that the best way to do what you want is to create your own user-control that has an attribute specifically for this. Do some research on C# User Controls and perhaps you'll find out how to do this.

How add and show tooltip textbox WPF if textbox not empty

Need to show a hint, which contains data from a text field. Prompt to appear if the textbox has data.
Just use binding to ToolTipService attached properties. XAML:
<UserControl.Resources>
<converters:IsStringNonemptyConverter x:Key="ToolTipVisibilityConveter" />
</UserControl.Resources>
<TextBox Name="textBox" VerticalAlignment="Center" HorizontalAlignment="Center" Width="150"
ToolTipService.ToolTip="{Binding Text, RelativeSource={RelativeSource Self}}"
ToolTipService.IsEnabled="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource ToolTipVisibilityConveter}}"/>
Converter:
internal sealed class IsStringNonemptyConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return !String.IsNullOrEmpty(value as string);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
You can disable the tooltip using triggers. Place this style in your window or App resources so that it can be shared across all the textboxes in your window or application depending on your choice -
<Style x:Key="{x:Type TextBox}" TargetType="TextBox">
<Style.Triggers>
<Trigger Property="ToolTip" Value="{x:Static sys:String.Empty}">
<Setter Property="ToolTipService.IsEnabled" Value="False" />
</Trigger>
</Style.Triggers>
Make sure you add the system namespace to your xaml -
xmlns:sys="clr-namespace:System;assembly=mscorlib"
I had this problem myself and figured out a different solution. I know this question has been answered but just like me there will still be people coming across this question, and I would like to share my solution:
XAML
<TextBox Name="textBox1" ToolTip="{Binding Text, RelativeSource={RelativeSource Self}}" ToolTipService.IsEnabled="False"/>
Code behind
private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
{
if (textBox1.Text.Length > 0)
{
ToolTipService.SetIsEnabled(textBox1, true);
}
}
I hope this helps someone.
I tried with Visibility Mode & TextChange event. ToolTip invisible when no text. May be useful for someother.
Xaml:
<TextBox Height="23" Width="100" Name="myTextBox" TextChanged="myTextBox_TextChanged" >
<TextBox.ToolTip>
<ToolTip Visibility="Hidden">
<TextBlock Name="toolTipTextBlock"></TextBlock>
</ToolTip>
</TextBox.ToolTip>
</TextBox>
TextChange event handler:
private void myTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
TextBox tb = sender as TextBox;
if (tb.Text.Trim() == "")
{
((ToolTip)tb.ToolTip).Visibility = Visibility.Hidden;
}
else
{
toolTipTextBlock.Text = tb.Text;
((ToolTip)tb.ToolTip).Visibility = Visibility.Visible;
}
}

Categories

Resources