WPF - Highlight Textbox Based on Content - wpf

I'm learning WPF/MVVM and I have a combo box that updates several text boxes based on the selected combo box value. What I would like to do is highlight some of the thext boxes if they contain a certain value. The text boxes do not receive focus and are read only. What is the best way to go about something like this using MVVM?
EDIT:
Thank you for the idea of using a Trigger. I'm actually trying to set the border color of the text box based on the value of the same text box. Based on the information provided below, this is what my text box looks like, but when the word "Transaction" shows up in the textbox, the border doesn't change. Am I referencing something incorrectly?
<TextBox Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="170" Grid.Column="4" Grid.Row="2" Margin="4,2,0,0" IsEnabled="False" DataContext="{Binding SelectedTDetails}" Text="{Binding CType}" Background="WhiteSmoke" Padding="1,0,0,0" >
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Text" Value="Transaction">
<Setter Property="BorderBrush" Value="LightGreen" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>

here is a sample using Triggers in TextBox
while using this sample trigger the same by typing item 2 in TextBox or select it from ComboBox
<StackPanel>
<ComboBox x:Name="combo">
<ComboBoxItem>item 1</ComboBoxItem>
<ComboBoxItem>item 2</ComboBoxItem>
</ComboBox>
<TextBox Text="{Binding SelectedItem.Content,ElementName=combo}">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Text"
Value="item 2">
<Setter Property="Background"
Value="LightGreen" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>
in above example the TextBox is bound to ComboBox's Selected Item (just to simulate your app's behavior)
The Trigger in TextBox's style look if the Text property contains item 2 and it changes the Background color of TextBox to simulate the highlight
This is just a basic idea on triggers, you may use your creativity to implement the desired highlight behavior perhaps involving flashing color, animated sizing etc.

Related

focus is wrong when trying to click inside a RadComboBox

So i have a RadCombobBox which is heavilly edited to have a list of options where 1 of the options can be an input field. There are different types of input fields you can chose from but i'm having a problem with the integer input field. There's also one with a text input field which shows no problems.
The combobox looks like this:
The text is dutch (don't mind it) beneath the text options there is a preset value, the idea here is you can either choose a preset setting (which corresponds to an integer value) or you can type in your own value.
What happens when i try to click on different places (last one is very peculiar):
If i try to click on the input box (which is highlighted in gray) it selects it and closes the combo box (this is not what i want).
If i try to click on the arrows on the right side of the combobox it changes the value.
If i scroll with my mouse, it changes the value.
If i keep my mouse down on the input box i can actually type in the value i want.
If i first click on the buttons on the side and then click inside the input box i can edit the value.
What I want is to click on the input box and be able to edit the value inside and when i'm finished press enter (or outside the combobox) to close it.
Somehow the focus or, something (i am not 100% sure) just seems to fail me.
here is the xaml code for the IntegerDataTemplate:
Integer selector
<Style x:Key="NumericUpDownStyle" TargetType="{x:Type telerik:RadNumericUpDown}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
</Trigger>
<Trigger Property="IsEditable" Value="False">
<Setter Property="SmallChange" Value="0" />
<Setter Property="LargeChange" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
<!-- Integer editor -->
<DataTemplate x:Key="IntegerDataTemplate">
<telerik:RadNumericUpDown x:Name="NumericUpDown"
Width="{Binding Path=ActualWidth,
ElementName=Editor}"
MaxWidth="{Binding Path=ActualWidth,
ElementName=Editor,
Converter={StaticResource WidthToWidthConverter}}"
HorizontalContentAlignment="Left"
Background="Transparent"
FontFamily="{telerik:Windows8Resource ResourceKey=FontFamilyStrong}"
IsInteger="True"
Style="{StaticResource NumericUpDownStyle}"
UpdateValueEvent="PropertyChanged"
Value="{Binding Path=Value,
UpdateSourceTrigger=PropertyChanged,
NotifyOnSourceUpdated=True}">
<telerik:RadNumericUpDown.NumberFormatInfo>
<globalization:NumberFormatInfo NumberGroupSeparator="" />
</telerik:RadNumericUpDown.NumberFormatInfo>
</telerik:RadNumericUpDown>
</DataTemplate>
<!-- Integer as Option -->
<DataTemplate x:Key="OptionsDataTemplate">
<TextBlock Height="20" Text="{Binding Converter={StaticResource IntegerSelectorObjectToStringConverter}}" />
</DataTemplate>
<local:SelectorTypeTemplateSelector x:Key="IntegerTemplateSelector"
OptionsDataTemplate="{StaticResource OptionsDataTemplate}"
SelectorDataTemplate="{StaticResource IntegerDataTemplate}" />
Somewhere it is going wrong, is there anyone that can point me to the right way to fix it (a work around would be fine as well).
I would like to add I have the same code but with a text box which does work properly, I've added the code below to have a comparison but i haven't been able to find a significant difference.
Text selector (which actually works properly)
<Style x:Key="TextBoxStyle" TargetType="{x:Type telerik:RadWatermarkTextBox}">
<Setter Property="BorderBrush" Value="{StaticResource BasicBrush}" />
<Setter Property="FontFamily" Value="{telerik:Windows8Resource ResourceKey=FontFamilyStrong}" />
<Setter Property="Padding" Value="2,2,0,0" />
<Setter Property="Validation.ErrorTemplate" Value="{StaticResource ErrorTemplate}" />
<Setter Property="telerik:RadWatermarkTextBox.WatermarkTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Margin="2,3,0,0"
FontFamily="Segoe UI"
FontStyle="Italic"
Foreground="{StaticResource WaterMarkBrushNoOpacity}"
Padding="0,-2,0,0"
Text="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource MarkerDisabledBrush}" />
</Trigger>
</Style.Triggers>
</Style>
<!-- String editor -->
<DataTemplate x:Key="StringDataTemplate">
<telerik:RadWatermarkTextBox x:Name="WatermarkTextBox"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
Background="Transparent"
BorderThickness="1"
Style="{StaticResource TextBoxStyle}"
Text="{Binding Path=Value,
UpdateSourceTrigger=PropertyChanged,
NotifyOnSourceUpdated=True}" />
</DataTemplate>
<!-- String as Option -->
<DataTemplate x:Key="OptionsDataTemplate">
<TextBlock Height="20" Text="{Binding Converter={StaticResource StringSelectorObjectToStringConverter}}" />
</DataTemplate>
<local:SelectorTypeTemplateSelector x:Key="StringTemplateSelector"
OptionsDataTemplate="{StaticResource OptionsDataTemplate}"
SelectorDataTemplate="{StaticResource StringDataTemplate}" />
It's really difficult to know what's going on without actually fiddling around with all the bits and pieces (e.g. the RadComboBox style + code), but it would be natural to assume that is has something to do with the drop down automatically closing when it loses focus, especially given that the standard WPF ComboBox has a FocusedDropDown state which opens the popup.
You could try and duplicate the RadComboBox by importing the style from Telerik, and extending the code behind into a new class (and restyle with the imported template). This way you can override methods and attach to events (e.g. Got/LostFocus), and play around with the template to see if you can adjust it to your needs.
However trying to wrestle such behavior into existing controls, just because it is possible to restyle the templates, often just ends up in a lot of grief (and hours wasted).
I have a feeling it would be easier to create a NumericRadComboBox which has the numeric up/down embedded in the combobox itself. So you restyle the RadComboBox to have numeric up/down buttons next to the drop down arrow, and implement the increment/decrement behavior manually.
The solution was rather simple, I was trying to fix it with preview mouse down but what i needed to do was on preview mouse up by adding: PreviewMouseLeftButtonUp="EditorPreviewMouseLeftButtonUp" in the xaml, which made the RadComboBox code as follows:
telerik:RadComboBox x:Name="Editor"
BorderThickness="0"
FontWeight="SemiBold"
ItemTemplateSelector="{StaticResource IntegerTemplateSelector}"
PreviewMouseLeftButtonUp="EditorPreviewMouseLeftButtonUp"
SelectionBoxTemplate="{StaticResource SelectionboxTemplate}"
Validation.ErrorTemplate="{StaticResource ErrorTemplate}" />
The code behind looked lik this:
private void EditorPreviewMouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
var originalSource = e.OriginalSource as FrameworkElement;
if ((originalSource != null) && (originalSource.ParentOfType<TextBox>() != null))
{
e.Handled = true;
}
}
The MouseUp is when the selection changed event is called which causes the combobox to close, by stating the event is finished before that happens it won't close the combobox. All you now have to do is press enter after you've changed the value and it will be selected and updated correctly.

Change DockPanel's background to match the disabled ListView's background color

I have a ListView inside a DockPanel. I need the ListView to be stretched horizontally and centered vertically inside the DockPanel. When the ListView is disabled (IsEnabled=false) I need to change the DockPanel's background to match the disabled ListView's background color.
So, basically I want to avoid the situation that can be seen on the picture below.
<Window>
<DockPanel IsEnabled="False">
<ListView IsEnabled="False" VerticalAlignment="Center" HorizontalContentAlignment="Center">
<ListViewItem Content="AAA"/>
<ListViewItem Content="BBB"/>
<ListViewItem Content="CCC"/>
</ListView>
</DockPanel>
</Window>
However, I don't want to explicitly declare colors anywhere in my code, because I don't know what kind of background color will a ListView use in different Windows environments (I'm not sure, but I guess different Windows theme/color settings can alter the default background color of the ListView - which potentially could be different from the color that I don't want to explicitly declare).
Binding the ListView's background color to the DockPanel's background color doesn't work.
So, right now I'm using the following workaround.
<DockPanel.Style>
<Style TargetType="{x:Type DockPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=parametersListView, Path=IsEnabled}" Value="False">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
I've extracted the resource key that my ListView's using in its ControlTemplate. On the template there is a Trigger declared on the IsEnabled property and it sets the control's background color to the color represented by the SystemColors.ControlBrushKey key.
This seems to work, but I'm not sure if this is the right way to do this.
Is there a way to do this in a more robust fashion, or this is the best that I could do?
(On a side note: using SystemColors.ControlBrush instead of SystemColors.ControlBrushKey produces a different shade of grey, I'm not sure why.)
Why not use LstFilledChild =true
Edit:
If you name your element and use the ElementName in the binding it should work.
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{Binding Background, ElementName=myList}">
<ListView Name="myList" IsEnabled="False" HorizontalAlignment="Center" HorizontalContentAlignment="Center" >
<ListViewItem>AAA</ListViewItem>
</ListView>
</DockPanel>
Since I've asked my question the application I was working on is live and it's using the solution I've originally come up which is the following. It works well for the moment.
<Window>
<DockPanel IsEnabled="False">
<DockPanel.Style>
<Style TargetType="{x:Type DockPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=myListView, Path=IsEnabled}"
Value="False">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
<ListView IsEnabled="False"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
x:Name="myListView"
x:FieldModifier="private">
<ListViewItem Content="AAA"/>
<ListViewItem Content="BBB"/>
<ListViewItem Content="CCC"/>
</ListView>
</DockPanel>
</Window>

Set properties of text box when combobox selection is made WPF XAML

how to Set properties of text box when combobox selection is made . foe example set background and IsEnabled property of text box when a combo box selection is made. I want it Purely in XAML not in code behind. i use MVVM
How to enable textBox1 only when SelectedItems is 1
<TextBox Height="23" HorizontalAlignment="Left" Margin="246,177,0,0" Name="textBox2" VerticalAlignment="Top" Width="120">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="IsEnabled" Value="False"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=comboBox1, Path=SelectedIndex}" Value="1">
<Setter Property="Background" Value="Green"></Setter>
<Setter Property="IsEnabled" Value="True"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
<ComboBox Height="22" HorizontalAlignment="Left" Margin="246,119,0,0" Name="comboBox1" VerticalAlignment="Top" Width="120" />
I think only with XAML you cannot achieve the condition Value ="1" or "3", i.e. a relation in a data trigger more complex than a equality.
For this case you need a converter.
This link could help you
How to get DataTemplate.DataTrigger to check for greater than or less than?
You can use a datatrigger for combo's selected object. Have a look to this previous question: WPF Visibility of a UI element based on combo selection
Try to generate a trigger when selecteditem is {x:Null}. For that, you will need to put your controls inside a DataTemplate and the put the trigger in the template's triggers collection.
Here is a sample code (not tested, please check by your own):
<TextBox Height="23" HorizontalAlignment="Left" Margin="246,177,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" IsEnabled" Value="True" />
<ComboBox Height="22" HorizontalAlignment="Left" Margin="246,119,0,0" Name="comboBox1" VerticalAlignment="Top" Width="120" />
<DataTemplate.Triggers>
<Trigger SourceName="comboBox1" Property="ComboBox.SelectedItem" Value="{x:Null}">
<Setter TargetName="textbox2" Property="TextBox.IsEnabled" Value="False" />
</Trigger>
</DataTemplate.Triggers>

WPF DataGrid Hyperlink Appearance and Behaviour

I am quite new to WPF, there is so much to learn and I think I'm getting there, slowly. I have a DataGrid which is used for display and user input, it's quite a tricky Grid as it is the main focus of the entire application. I have some columns that are read-only and I have used a CellStyle Setter to set KeyboardNavigation.IsTabStop to False to keep user input focused on the important columns and that works fine. I would like a couple of the read-only columns to be hyperlinks that show a tooltip and do not receive the focus, however I am struggling to write the XAML that will achieve all three requirements at the same time.
One of the columns is to indicate if the item on the row has any Notes. I have used the following XAML to display a HasNotes property in the cell in a DataGridTemplateColumn and on the Tooltip show the actual notes, in the Notes property:
<DataGridTemplateColumn x:Name="NotesColumn" Header="Notes">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding HasNotes, Mode=OneWay}">
<TextBlock.ToolTip>
<TextBlock Text="{Binding Notes}" MaxWidth="300" TextWrapping="Wrap" />
</TextBlock.ToolTip>
</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellStyle>
<Style>
<Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
</Style>
</DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>
That works fine but I would like to make it a Hyperlink instead so the user can do something with the Notes when they click on the cell contents.
I have another column which is a DataGridHyperlinkColumn used to display a Unit of Measurement on a hyperlink and when clicked the user can change the unit. (The reason I have done it like this, rather than a ComboBox for example, is because as much as I want the user to be able to change the unit I want to make the interface such that it is a very deliberate act to change the unit, not something that can be done accidentally). The following XAML puts the Hyperlink column on for Unit
<DataGridHyperlinkColumn x:Name="ResultUnitLink" Binding="{Binding Path=Unit.Code}" Header="Unit" Width="Auto" IsReadOnly="True">
<DataGridHyperlinkColumn.CellStyle>
<Style>
<Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
</Style>
</DataGridHyperlinkColumn.CellStyle>
<DataGridHyperlinkColumn.ElementStyle>
<Style>
<EventSetter Event="Hyperlink.Click" Handler="ChangeUnit" />
</Style>
</DataGridHyperlinkColumn.ElementStyle>
</DataGridHyperlinkColumn>
One problem with the XAML for the Hyperlink column is that the IsTabStop = False doesn't appear to work, when tabbing through the Grid my hyperlink column still receives the focus, unlike the other columns where I've used a setter to change IsTabStop. If push comes to shove I could live with that but I'd rather not.
What I actually want from both those columns is an amalgamation of the two appearances/behaviours i.e. Columns where the data is displayed on a hyperlink, where TabStop = False and which display a tooltip of a different property when hovered over.
Can anyone help advise me how to get a column that achieves the following:
Hyperlink displaying one property
Tooltip displaying a different property
IsTabStop = False that actually works when used with a hyperlink
Thanks in advance to anyone who can help.
I've had issues with the Hyperlink in the past, so have this Style which I use for Labels or Buttons to make them look like Hyperlinks. Try making your column Template into a Button or a Label and applying this style.
<Style x:Key="ButtonAsLinkStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ContentPresenter ContentStringFormat="{TemplateBinding ContentStringFormat}" />
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>

WPF - Making selected listview column editable on button click

I have a listView with a gridview presentation and TextBlocks in each column. I would like to make the selected line editable by replacing the textblocks with TextBoxes and ComboBoxes when the user clicks on an edit button. I tried to do this by setting styles that toggles the visibility of the controls like this :
<Style x:Name="ItemDisplayStyle" TargetType="{x:Type TextBlock}" x:Key="ItemDisplayStyle">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Visibility" Value="{Binding Path=dislayMode}" />
</Style>
<Style x:Name="ItemEditStyle" TargetType="{x:Type FrameworkElement}" x:Key="ItemEditStyle">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Visibility" Value="{Binding Path=editMode}" />
</Style>
displayMode and editMode are Visibility properties set in the code-behind.
And lower in the xaml :
<GridViewColumn Header="Date de début" Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<TextBlock Margin="-6,0"
HorizontalAlignment="Stretch" TextAlignment="Center"
Text="{Binding Path=DateDebut, Mode=TwoWay}"
Style="{StaticResource ItemDisplayStyle}" />
<TextBox x:Name="tbDateDebut" Margin="-6,0"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
Text="{Binding Path=DateDebut, Mode=TwoWay}"
Style="{StaticResource ItemEditStyle}" />
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
My problem is that changing 'editMode' and 'displayMode' in the code-behind does not seem to be detected at the UI level.
Also, even if I get this to work, I don't have any idea of how to apply it only to the selected line.
I can do this separately by binding the visibility value with the ListView so that when the user selects a line, she/he gets the editable controls on that line but I really want to allow this only when they click on a button.
Have you Refreshed the contents of the Grid after making changes? You can use the Grid.GetColumn method and send the sender object i.e. edit button (which I suppose would be separate for each column) and then probably use the VisualTreeHelper to get the textbox and combobox in that column.
Also, why don't you use the 'IsReadOnly' property of the TextBox instead of replacing the TextBlock? Make it true or false as per your requirement.

Resources