I am using a Toggle switch that I downloaded from NuGet.
It has a standard "ON/OFF" text on the switch.
I was trying to change the text to say something else, is this possible through styles on XAML?
As #DavidPilkington mentioned, use the CheckedContent and UncheckedContent properties. They accept "content" just like a Button or any other ContentControl, meaning you can assign simple text to them:
<toggleSwitch:HorizontalToggleSwitch IsChecked="True" CheckedContent="Activated!" />
or anything inheriting from UIElement:
<toggleSwitch:HorizontalToggleSwitch>
<toggleSwitch:HorizontalToggleSwitch.UncheckedContent>
<StackPanel>
<Ellipse Height="40" Width="40" Fill="Blue"/>
<TextBlock TextAlignment="Center">Disabled</TextBlock>
</StackPanel>
</toggleSwitch:HorizontalToggleSwitch.UncheckedContent>
</toggleSwitch:HorizontalToggleSwitch>
Well it seems the answer was so simple I am really surprised,
<Style TargetType="{x:Type switch:HorizontalToggleSwitch}">
<Setter Property="CheckedContent" Value="RUN"/>
<Setter Property="UncheckedContent" Value="STOP"/>
</Style>
This changes the text value for each state.
Related
I've been reading this documentation and I was wondering if it's possible to position the selection check box of the container? Specifically, this thing here:
Ideally, I want it aligned on the right. So far I've tried to use
<ListView.ItemContainerStyle>
<Style TargetType="WHAT DO I WRITE HERE?">
<Setter Property="HorizontalAlignment" Value="Right"/>
</Style>
</ListView.ItemContainerStyle>
With various TargetTypes. Is it even possible to position that Selection-box?
To be honest you're looking in the wrong place. The ItemContainerStyle is adjust the margin padding and such properties of the container of the items of a listview.
What You need is a style for a ListViewItem. Lucky for us it's easily available from the ListViewItem styles and templates from the MSDN Documentation.
I won't paste the whole code here since, it's huge and it's cause deviated focus from the actual code that you need to tweak.
From the style from the above link, pick the second style of the two mentioned and refer to the below code:
<Border x:Name="MultiSelectSquare"
BorderBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
BorderThickness="2"
Width="20"
Height="20"
Margin="12,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Visibility="Collapsed" >
<Border.Clip>
<RectangleGeometry Rect="0,0,20,20">
<RectangleGeometry.Transform>
<TranslateTransform x:Name="MultiSelectClipTransform"/>
</RectangleGeometry.Transform>
</RectangleGeometry>
</Border.Clip>
<Border.RenderTransform>
<TranslateTransform x:Name="MultiSelectCheckBoxTransform"/>
</Border.RenderTransform>
<FontIcon x:Name="MultiSelectCheck"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
Glyph=""
FontSize="16"
Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
Visibility="Collapsed"
Opacity="0"/>
</Border>
The above code handles the checkbox kinda tick mark with border for SelectionMode="Multiple".
All the changes you want to do must be done in this style and the above code section of the style.
Please Note: I would advise not to play around with Visibility and Opacity property as they are modified using VisualStates. Don't worry about them they'll change states at runtime.
Seems that a WPF application I inherited has a DataGrid
<DataGrid x:Name="dataGrid" ItemsSource="{Binding AllTroubleCalls}" SelectedIndex="{Binding SelectedIndex}"
I want to end up setting the Background color to yellow only if the Textbox contains text in it.
The text appears when I click on certain rows in the Datagrid
It seems that everything is based upon this "Binding"
{Binding ... }
I have a textbox that I added a Name to it
<TextBox ToolTipService.ShowDuration="120000" ToolTip="{Binding ThreatText}" Name="txtThreat" Text="{Binding ThreatText}"
TextWrapping="Wrap" AcceptsReturn="True"
VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible"
Margin="3" Grid.Row="8" Grid.Column="1"
Grid.ColumnSpan="3" Grid.RowSpan="1" IsReadOnly="True" Height="30"/>
Show then when I am in a method I can "test" this and it works
txtThreat.Background = new SolidColorBrush(Colors.Yellow);
However, I'm not understanding why I cannot get a handle on the data changing from whatever row is clicked on in the Datagrid, that data then appears "magically" in many textboxes etc.. on the xaml page.
I gather that the "Binding" is handling this, but it is also MVVM 2 way binding ?
I have tried plastering so many breakpoints into so many methods but I can't seem to get any of them to show me how the data is changing on row click
There's a little too much going on in this question without the details. However, I can at least answer what I think is your goal. The easiest way to get a textbox to be yellow if there's a text in it is with a style:
<TextBox >
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="Background" Value="Yellow"></Setter>
<Style.Triggers>
<Trigger Property="Text" Value="">
<Setter Property="Background" Value="White"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
As for figuring out how the data is changing... The Text displayed in your TextBox is bound to ThreatText. That means the text should change only when a property named ThreatText is changed in a class somewhere (your viewmodel). Have you tried putting a breakpoint on the setter for the ThreatText property? You can also put a breakpoint on the getter as well. It sounds like that when you click in the textbox/row, WPF updates the text in the UI, which means it's reevaluating the binding due to some change in ThreatText; this also means it'll hit the getter... you can check out the stack trace if it does to see what's going on.
Is it possible to create a style for ToolTip that would place an image next to the Item on which the tool tip resides and then show the tool tip text when the user hovers over the image? Something like this:
Currently I am doing a StackPanel to add the image with the tool tip like so:
<StackPanel Orientation="Horizontal">
<CheckBox Content="Reload Employee Data"
IsChecked="{Binding AdjustmentSettings.ReloadEmployeeData}"
Grid.Row="0"
Grid.Column="0">
</CheckBox>
<Image Source="/DelphiaLibrary;Component/Resources/info.ico"
ToolTip="Check if you want to re-upload ...."/>
</StackPanel>
EDIT
Just to clarify, I am looking for a way to style ToolTip such that if I define ToolTip on any object (i.e., Button, CheckBox, etc.) the info image is shown and the tool tip text is placed on this info image.
I would like to be able to do something like this and still get the same as the stack panel above:
<CheckBox Content="Reload Employee Data"
IsChecked="{Binding AdjustmentSettings.ReloadEmployeeData}"
Grid.Row="0"
Grid.Column="0"
ToolTip="Blah blah blah..."
Style="{StaticResource ToolTipImageStyle}">
</CheckBox>
And be able to apply this ToolTipImageStyle to any control (i.e., Button, CheckBox, TextBox, etc.). If that isn't possible can I style an individual control and just create different styles for different controls (one for buttons, another for TextBlock, etc.)?
This should do it. I couldn't figure out the color so just change that.
Source 1
Source 2
<Image Source="/DelphiaLibrary;Component/Resources/info.ico" Width="25" Height="25">
<Image.ToolTip>
<ToolTip Background="LightBlue">
<TextBlock Width="200" TextWrapping="WrapWithOverflow">
Check if you want to re-upload table foxpro.hrpersnl from the source. <LineBreak />
Leave unchecked to use existing data that has been previously uplaoded.
</TextBlock>
</ToolTip>
</Image.ToolTip>
</Image>
Update 1:
Source 1
In the App.xaml add this:
<Application.Resources>
<Style TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}" >
<TextBox Background="LightBlue" Width="200" TextWrapping="WrapWithOverflow" Text="{TemplateBinding ToolTip.Content}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Then in your XAML file change to:
Note: This will work with all object's tool tips.
<Image Source="Images/MenuImageZoomOut.png" Width="25" Height="25"
ToolTip="Check if you want to re-upload table foxpro.hrpersnl from the source. Leave unchecked to use existing data that has been previously uplaoded." />
The image:
If this doesn't work, try this: Source
I have two ToggleButtons. I want only one of them to be in the Pressed state at any time. So let's say Model ToggleButton is pressed:
I want to achieve the below concepts:
If I press Drawing ToggleButton, the Model ToggleButton will be unpressed and Drawing ToggleButton will go to pressed state.
If press the Model Button which is in the pressed state nothing will happen.
By the way here is all I have done so far :(
<ToggleButton Width="50" Height="23" Margin="0 0 0 0">Model</ToggleButton>
<ToggleButton Width="50" Height="23" Margin="0 0 7 0">Drawing</ToggleButton>
Update:
Using the provided link under the comments, I came up with this:
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Model" IsChecked="True" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Drawing" />
Now the above code gives me two buttons, but how can I style these? I know how to style. But I don't know what to style here? I mean I have already filled the style property here how can I style the ToggleButton itself?
Since RadioButton inherits from ToggleButton, you can set ToggleButton style to it and use BasedOn to inherit default style of ToggleButton like this:
<RadioButton GroupName="Test" Width="50" Height="23" Margin="0 0 7 0"
Content="Model">
<RadioButton.Style>
<Style TargetType="ToggleButton"
BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Background" Value="Red"/>
<!-- Set other properties here-->
</Style>
</RadioButton.Style>
</RadioButton>
According to this answer that DLeh linked in comments, you can do this by styling a RadioButton to use the ToggleButton styles.
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" />
To answer your second question on how to customize the style property for this, you can create another style that inherits from the base ToggleButton style, and use it instead. Like this:
<Style x:Key="CustomToggleButtonStyle"
TargetType="{x:Type RadioButton}"
BasedOn="{StaticResource {x:Type ToggleButton}}">
// Custom Style setters here
</Style>
<RadioButton Style="{StaticResource CustomToggleButtonStyle}" />
And of course there's always the option of completely rewriting the entire template yourself from scratch. MSDN has a good examples of a custom ToggleButton Template you could use to start with.
I want to create a column chart using the WPF toolkit, but I want to hide the Y axis and display the dependant value for each column below the X value.
Is this possible?? If not, what other way could be used to get this result??
Thanks in advance.
Yes, you can hide the Y-axis. You should add the y-axis explicitly to the Axes property of the chart and set the Opacity property, like this:
<charting:Chart.Axes>
<charting:LinearAxis Orientation="Y" Opacity="0" />
</charting:Chart.Axes>
As to the second question, you should change the AxisLabelStyle property. I answered a similar question here, you can look at the code and change the ControlTemplate according to your needs.
The template will look something like this, don't forget change bindings:
<Style x:Key="twoLabelsStyle" TargetType="charting:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting:AxisLabel">
<StackPanel>
<TextBlock Text="{Binding Month}" />
<TextBlock Text="{Binding Number}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Anyway if it will not still work - add your source code to your question, it can help much better.