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.
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.
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.
I am designing an application in Xamarin.Forms and I am using an Editor control like so:
I run this on UWP and when I hover my mouse over the Control, the Background Color is Inverted to Black. see Images Below:
Unfocused
Mouse Over
Focused
As you can see, pretty horrible.
I've got a feeling it may be to do with this ThemeResource Style I can also see that on the WinRT platform (I think the same control is used for UWP) it is definitely applying that style but I don't know enough about Styles to tell
It may be to do with this line in particular
Indeed, the problem is where you expected it to be. In your case, the VisualState PointerOver animates the border brush and background's opacity to new values. If you want to keep the background as it is, just remove the part marked in the code below.
I would probably keep the border brush highlight so that the user still sees that the control is focused. However, you can also remove that (actually the whole visual state) if you want to.
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<!-- Remove the following -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundHoverOpacity}" />
</ObjectAnimationUsingKeyFrames>
<!-- until here -->
</Storyboard>
</VisualState>
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.
I'm a beginner working a C# Windows 8 app. I have a RichEditBox in the center of the screen whose width changes depending on the window size. I can set the width of this RichEditBox to Auto by editing its own properties, but I want to set the width to Auto when the width of the window falls below a certain point. I'm using VisualStates to define the various screen options. The problem is that when I set the value to Auto, the app will crash when it tries to invoke the new VisualState.
My code is as follows:
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FlexibleViewState">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Editor" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
I don't know why it's doing this. I can do the following without any problems:
<RichEditBox x:Name="Editor" Width="Auto"/>
But when I try to set the width to Auto with a VisualState it crashes. Is there any way to fix this or to work around this problem?
The first thing to realize, is that the width Auto is represented as a NaN value. see MSDN for documentation on FrameworkElement.Width
With this in mind, you can set your (windows 8.1) style like this:
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FlexibleViewState">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Editor" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Double>NaN</x:Double>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
If you are using a different flavour of XAML, you may need to use sys:Double instead of x:Double