I Had a Tabcontrol
and a RichTextBox control as below
<TabControl x:Name="tabControl" SelectedIndex="{Binding SelectedTabIndex, Mode=TwoWay}">
<TabItem Header="Edit" TabIndex="0" />
<TabItem Header="View" TabIndex="1" />
</TabControl>
<RichTextBox x:Name="richTextBox"> </RichTextBox>
and now I have two Styles defined like
<Style TargetType="Table" x:Key="EditStyleKey">
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
</Style>
<Style TargetType="Table" x:Key="ViewStyleKey">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
I will create a table in Rich text box.
My problem is that when I select the first tabitem (SelectedIndex=0) then I should apply trigger to change the style "EditKeyStyle" for table in richtextbox. and when I select the second tab (SelectedIndex=1) then I should apply the "ViewStyleKey" for Richtextbox.
As I am new to WPF I couldn't able to fix it using the trigger and I am not sure of where to write the trigger for these kind of dependency.
Someone please provide me help for fixing this issue as this is a high priority issue.
Thanks in advance.
Consider using a single Style with Style.Triggers and DataTriggers to control the style of the table in your RichTextBox. The code below changes the BroderThickness and Padding properties based on the value of the SelectedIndex you'll have to change the SelectedIndex binding so that it points to your TabControl.SelectedIndex property.
I've used something similar to the code below in a project
<UserControl.Resources>
<Style x:Key="tableStyleKey" TargetType="Table" >
<Setter Property="BorderBrush" Value="Black"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=SelectedIndex}" Value="0">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=SelectedIndex}" Value="1">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<RichTextBox>
<Table Style="{StaticResource tableStyleKey}"/>
</RichTextBox>
Related
I snooped the desired property and I can change it in real-time:
But I don't know what exactly to set in the code.
When I edit the XAML like this:
<dock:DockingManager x:Name="dockManager" ...>
...
<dock:DockingManager.AnchorablePaneControlStyle>
<Style TargetType="{x:Type dock:LayoutAnchorablePaneControl}">
<Setter Property="BorderBrush" Value="DarkRed"/>
</Style>
</dock:DockingManager.AnchorablePaneControlStyle>
...
I get the border color changed but the rest of behavior is unusable:
I am not get the big picture yet for what you wanna get, but I think you have to edit the Theme.xaml file containing all AvalonDock Styles and have a look there at the following style:
<Style x:Key="AvalonDock_AnchorablePaneControlStyle" TargetType="{x:Type avalonDockControls:LayoutAnchorablePaneControl}">
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{Binding Model.Root.Manager.Foreground, RelativeSource={RelativeSource Self}}" />
<Setter Property="Background" Value="{DynamicResource AvalonDock_BaseColor8}" />
<Setter Property="Template">...
Then you can see that the Background property is binded to a DynamicResource. You have to change the value of AvalonDock_BaseColor8 resource accordingly to what you want to achieve.
I've followed this question to get rid of the highlight effect in my ListView. The highlight effect is disabled correctly, but I'm still getting a magnify effect on the MouseOver. It's very anoying especially when moving over the ListView because it give a blury effect.
Here is my code
<ListView ItemsSource="{Binding Roles}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Focusable" Value="False"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Focusable" Value="False" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
And this:
is the behavior I'm willing to get rid off.
Does anyone know how to get rid of this magnify effect?
rather than changing border thickness
<Setter Property="BorderThickness" Value="0" />
hide it by changing border color
<Setter Property="BorderBrush" Value="{x:Null}" />
I have a WPF label and want to change its look on mouse over or hover.
This question shows how to do it with TextBlock and not quite what I want using a trigger to set a textblock foreground on mouseover.
It's different because with Label, changing foreground did not work.
Using the example from the question that you linked from, but changing the word TextBlock to Label works just fine for changing the Foreground, so you'll have to provide more information if you really can't get it to work. Try this:
<Label Content="My colour changes just fine" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Foreground" Value="Blue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
Note that if you set the Foreground on the actual Label element, as you did in your answer, instead of in the Style then that would stop the Trigger from working, so don't do this:
<Label Content="My colour changes just fine" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" Foreground="Black">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Foreground" Value="Blue" /> <!-- This won't work -->
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red" /> <!--This won't work-->
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
Here is how you can do it. Ignore other properties, focus on Label.Style.
Using a Label allows you to align text as I showed below. That does not work with TextBlock.
<Label Content="Hover over me" Name="lblSeasons" FontWeight="Bold" Foreground="DarkBlue" Width="150" HorizontalContentAlignment="Center" Height="50"
VerticalContentAlignment="Center" >
<Label.Style>
<Style TargetType="Label">
<Setter Property="Foreground" Value="Green"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Aqua"/>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
I have got two images ( a car and a motorcycle ) and a text box in my application. When I write car in the text box then the image car should be selected ( visible by making a blue or red boundary ) and the other one ( the motorcycle ) should have a gray effect.
When i write motorcycle in the text box vice versa should happen i.e Motorcycle should have a boundary and the car greyed out.
Does anyone know how can i make it possible?
use an approach like the following in your images
<Border BorderThickness="2">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="BorderBrush" Value="LightGray"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=targetTextBox, Path=Text}" Value="Car">
<Setter Property="BorderBrush" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Opacity" Value="0.4"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=targetTextBox, Path=Text}" Value="Car">
<Setter Property="Opacity" Value="1"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Border>
You can also set whichever else property you want. Just remember to set the default value inside your Style that you define the Datatriggers that will conditionally change these values
I am using SL4 Business application with WCF RIA service. In my app, there is a loginForm. in the designer of loginform I can found username textbox and password textbox.But in .Xaml page its like the code given below.
<local:BusyIndicator x:Name="busyIndicator" BusyContent="{Binding Path=Strings.BusyIndicatorLoggingIn, Source={StaticResource ApplicationResources}}"
IsBusy="{Binding IsLoggingIn}">
<StackPanel Orientation="Vertical">
<toolkit:DataForm x:Name="loginForm"
Padding="10,0,10,0"
CurrentItem="{Binding}"
IsEnabled="{Binding IsLoggingIn, Converter={StaticResource NotOperatorValueConverter}}"
AutoEdit="True" CommandButtonsVisibility="None" HeaderVisibility="Collapsed"
AutoGeneratingField="LoginForm_AutoGeneratingField"
Style="{StaticResource LoginDataFormStyle}" />
</StackPanel>
</local:BusyIndicator>
My question is I need to style the username textbox as well as password textbox in the dataform. How can I do this? From where can i access these controls?
Those controls are generated by the DataForm control. You basically need to put a default style for TextBox and PasswordBox under the root Grid's Resources. I gave them a massive font size of 50. You just need to replace them with your own styles.
<!-- LoginDataForm Style -->
<Style x:Key="LoginDataFormStyle" TargetType="dataControls:DataForm">
<Setter Property="Width" Value="370"/>
<Setter Property="AutoCommit" Value="True"/>
<Setter Property="AutoGenerateFields" Value="True"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="DescriptionViewerPosition" Value="Auto"/>
<Setter Property="LabelPosition" Value="Auto"/>
<Setter Property="HeaderVisibility" Value="Collapsed"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="dataControls:DataForm">
<Grid dataControls:DataField.IsFieldGroup="True">
<Grid.Resources>
<Style TargetType="TextBox">
<Setter Property="FontSize" Value="50"/>
</Style>
<Style TargetType="PasswordBox">
<Setter Property="FontSize" Value="50"/>
</Style>
<Style x:Key="ButtonGeneric" TargetType="Button">
Hope this helps. :)
The form automatically generates the fields for you (the AutoGenerateFields property is set to True by default). However, in the case of the LoginForm in the Silverlight Business Application template, the form has a handler for the AutoGeneratingFields event (LoginForm_AutoGeneratingField as shown in your xaml). In this handler, the username textbox and the password box are created, databound and added to the form. You can jump in there and do the customization you want by setting their properties.
Hope this helps :)