I have a button whose states changes depending on some criteria., eg, change colour, size, enabled/disabld, when a toggle button is on. My goal is to encapsulate the states so that we can do something like this:
if (toggleButton.IsOn) btnName.state = State1;
else btnName.state = State2;
Where we define State 1 and State 2 (maybe in XAML?).
Is this possible to do with UWP?
You can invoke a certain state of a control by using VisualStateManager. For example, if you want to manually let the ToggleSwitch go to its On state, you can write -
VisualStateManager.GoToState(MyToggleSwitch, "On", true);
But don't do this. Because this only set the state visually, the underlying IsOn property is still False.
Actually, by setting IsOn to True, the On state will be automatically applied. This is because inside the ToggleStates visual state group in the ToggleSwitch's default style, there's an On state with a bunch of Storyboards like the following -
<VisualState x:Name="On">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
Storyboard.TargetProperty="X"
To="24"
Duration="0" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
These Storyboards will begin whenever IsOn is set to True. This triggering logic is encapsulated inside ToggleSwitch's code. So when you want to define your own visual states for your custom controls, you will need to manually hook up the state properties (e.g. IsChecked, IsSelected, IsOn, IsEnabled) with their corresponding states, so when other people are using your controls, they can simply update them and expect the right states to be applied.
Related
I can't change checkbox' background by using following code, but it works for Windows Store app (Windows 8.1). I want to know how to make it works for UWP?
this.checkBox.Background = new SolidColorBrush(Windows.UI.Colors.Yellow);
this.checkBox.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
For changing the Foreground and Background color of the checkbox, you need to update its template. You can do this by - Right-Click on your checkbox from the visual designer, then click on Edit Template > Edit a copy. This will create the default template for the CheckBox. (You can check out the whole template here)
This template has all the visual states for the checkbox. You will need to override the visual state that you need. For Example you do something like this to the "UncheckedNormal" state.
<VisualState x:Name="UncheckedNormal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Your Fill Color here for only check part" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Your foreground color here" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Your background color here" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
This can also be written in C# but it is way too complex and editing styles in XAML is the recommended way of styling.
Hope this helps. Please feel free to add any questions you might have.
So this is probably a really simple answer. In my UWP app I've tried to start using the built-in Windows controls instead of my own buttons made from Borders around Textblocks. I'm doing this because it's simpler, but most importantly I need an easy to use toggle button.
I've learned about CommandBar and AppBarToggleButton and these seem to be exactly what I want. I'm able to set the background colour of the CommandBar just fine, but when toggled the AppBarToggleButton is always the user's accent colour. I need to be able to define it to match my app's branding (green). I have a feeling it requires me using some sort of theme as it's not in the xaml object's Brush properties menu, but I'm lost from then on out.
So this is my code, though it's very basic.
<CommandBar Background="{StaticResource MapButtonsBackgroundAcrylic}">
<AppBarToggleButton x:Name="tog_view_mode" Icon="View" Label="View Mode" Foreground="White"/>
<AppBarSeparator Foreground="White"/>
<AppBarToggleButton x:Name="tog_edit_mode" Icon="Edit" Label="Edit Mode" Foreground="White"/>
</CommandBar>
And this is what it gives me. My user accent colour is that blue. Also the change to black text isn't good.
As I'll have several toggles in my app, I'd like to either make a single style that I can assign them, or maybe change the accent colour that the app see's? I'm not sure what the correct procedure is here as I'm new to modifying built-in controls.
So I need a way for, when toggled,
The background to be green, say #FF008000
The foreground to be white.
Can anyone help me out?
You can override the style template for the AppBarToggleButton to achieve this.
To do this you need to right click on your AppBarToggleButton > Edit template > Edit a copy.
Then add the relevant code to the visual state. In your case the visual state is "Checked".
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckedHighlightBackground" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Your color here(green)"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="OverflowContentRoot" />
</Storyboard>
</VisualState>
Hope this helps.. please feel free to ask any questions that you might have..
You should override the AppBarToggleButtonBackground and other brushes in your App.xaml (if you want to apply to the whole app), in the Resources section of your page (if you want to apply to a specific page) or the same inside the actual toggle button (if you want to apply to a single button). The available resource keys are listed in the documentation.
I have a question regarding of changing button color in WP 8.1 on touch down or tap. I've already figured out how to change the background when there is no interaction, but I want to also change the background color of the button if it is tapped to transparent. Is this possible?
You'll have to modify the control template, as the "Pressed" state background is hard-coded into the control as "PhoneForegroundBrush":
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
So copy-paste the entire default "ButtonBase" control template from the SDK, and modify the above parts as needed.
On the one hand, if you want a consistent pressed color throughout your app, then it's easy -- just change the hard-coded color. If on the other hand you want a different color for different buttons, then it's a bit trickier -- you'll have to subclass Button, and add a new "PressedBrush" dependency property to the control, then integrate that property into the control template.
How to customize the view of item that was selected in ListBox control? In my case I want to define the color of background of selected item.
Thank you!
Try this
private void listLocs_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBoxItem myitem = listLocs.SelectedItem as ListBoxItem;
SolidColorBrush brush = new SolidColorBrush(Color.FromArgb(255,255,0,0));
myitem.Background = brush;
}
More details from:
How can I change selected item's background color in Windows Phone?
You can accomplish this by styling the ListBoxItem with the ItemContainerStyle property of the ListBox. Use the following steps
In Visual Studio (or Blend) open the page (xaml) with your ListBox on it.
View the design.
Right click the ListBox and select Edit Additional Templates -> Edit Generated Item Container (ItemContainerStyle)
Select a name a location for this style
In the selection states add a new animation for background.
So, your Storyboard would change from:
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
To:
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Error: "Invalid attribute value for property Background."
XAML:
<VisualState x:Name="Pressed">
<Storyboard>
....
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="/Images/home_2_click.png" />
</ObjectAnimationUsingKeyFrames>
....
</Storyboard>
</VisualState>
you seems to apply background imag to a button during animation.
Certainly you are applying it in a wrong way.
you must do the following:
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<ImageBrush ImageSource="" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
This will certainly solvers your problem. And if it does, then please mark this as an accepted answer.
thanx