For some reason there's no easy way to change focused background of TextBox from the default White color.
The only way it works (I need it to be dark-ish or transparent) is to create custom textbox, paste bazzillion lines of code (from here) and then edit TWO lines:
<VisualState x:Name="Focused">
<Storyboard>
...
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#000000" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement" Soryboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.1" />
</ObjectAnimationUsingKeyFrames>
My question is: is there a better way to do it? Is all the other code necessary (~240 lines)?
Thank you.
Do this in your App.xaml file:
<Application>
<Application.Resources>
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Black" Opacity="0.2"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
<SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="White" Opacity="0.2"/>
</Application.Resources>
</Application>
This will overwrite the default colors with your own custom colors for every TextBox in your project. If you want to apply the appearance to only some of your TextBoxes, define it locally for each TextBox:
<TextBox>
<TextBox.Resources>
Put brushes here
</TextBox.Resources>
</TextBox>
It would be easier to create a style and then apply it. At design time you can use the Document Outline pane in Visual Studio and right-click the TextBox. Then choose the Edit Template -> Edit Copy. Then modify that style in the same way you have done in your question.
Related
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 Grid which should be collapsed by default it is in A xaml file.
Another Button in Grid in another xaml file.When clcik button Grid should be enabled.
How to achieve this I have Tried this can you please help
<Grid Visibility={Binding Visibilityproperty}/>
<Button Content="A" Command={Binding VisibilityCommand"}/>
In button command i have written the logic to enable the visibilityproperty to visible
But grid is not at all visible if i do like this
Better solution in MVVM pattern is welcomed
<Button Content="Button!">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference dataGrid}"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
{x:Reference dataGrid} references a DataGrid with the name dataGrid, alternatively you could just use Storyboard.TargetName. You would normally use the Storyboard.Target property if you do binding or references to resources.
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 want to change the default text style (foreground color, font weight, etc) for pivot item header text when the header is selected.
E.g., if I have the following:
<Pivot>
<PivotItem Header="One"></PivotItem>
<PivotItem Header="Two"></PivotItem>
</Pivot>
I want the selected pivot item to be bolded when selected and/or change the foreground color (or maybe put the text in a border, etc). I don't want to change the default style for the unselected items.
Thanx,
The XAML framework offers many ways to customize the appearance of your apps. Styles let you set control properties and reuse those settings for a consistent appearance across multiple controls. You create a control template when you want to customize a control's visual structure and visual behavior.
You don't need to put the text of pivot header in a border, edit the Style for PivotHeaderItem would be a good choice, and you can add this style to the Resources of the Page.
Resources are typically definitions of some object that you expect to use more than once.
There is a default PivotHeaderItem styles and templates, you can copy it and add this to you page resources just like this:
<Page
x:Class="..."
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style TargetType="PivotHeaderItem">
...
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
...
</Grid>
</Page>
Now if you want to change the foreground of the text in header when the item is selected, you can edit the <VisualState x:Name="Selected"> like this:
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
If you want to change the text of header to be bold, you can edit above VisualState like this:
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="FontWeight">
<DiscreteObjectKeyFrame KeyTime="0" Value="Bold" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
You can leave other VisualStates as defalut, if you just want to change the style when the item is selected.
In XAML
<Pivot SelectionChanged="Pivot_SelectionChanged">
<PivotItem>
<PivotItem.Header>
<TextBlock Text="One"></TextBlock>
</PivotItem.Header>
</PivotItem>
<PivotItem>
<PivotItem.Header>
<TextBlock Text="Two"></TextBlock>
</PivotItem.Header>
</PivotItem>
</Pivot>
In C#
private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
Pivot pivot = sender as Pivot;
PivotItem pivotItemSelected = ((PivotItem) ((Pivot) sender).SelectedItem);
for (int i = 0; i < pivot.Items.Count; i++)
{
PivotItem pivotItem = pivot.Items[i] as PivotItem;
TextBlock tb = pivotItem.Header as TextBlock;
if (pivotItem == pivotItemSelected)
{
//Style
tb.Foreground = new SolidColorBrush(Colors.Blue);
}
else
{
tb.Foreground = new SolidColorBrush(Colors.Black);
}
}
}
I hope this can help you
I would like to display an animation gif such as loading... in my XAML as my procedure is progressing. I found out that this cannot be easily done in WPF as I loaded my Gif and it just shows the first frame. What are the best ways to display an animation in WPF.
I had this issue, until I discovered that in WPF4, you can simulate your own keyframe image animations. First, split your animation into a series of images, title them something like "Image1.gif", "Image2,gif", and so on. Import those images into your solution resources. I'm assuming you put them in the default resource location for images.
You are going to use the Image control. Use the following XAML code. I've removed the non-essentials.
<Image Name="Image1">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded"
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="Source" RepeatBehavior="Forever">
<DiscreteObjectKeyFrames KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Images/Image1.gif"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrames>
<DiscreteObjectKeyFrames KeyTime="0:0:0.25">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Images/Image2.gif"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrames>
<DiscreteObjectKeyFrames KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Images/Image3.gif"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrames>
<DiscreteObjectKeyFrames KeyTime="0:0:0.75">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Images/Image4.gif"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrames>
<DiscreteObjectKeyFrames KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Images/Image5.gif"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Image.Triggers>
</Image>
You could embed a MediaElement
<MediaElement LoadedBehavior="Play" Source="path/to.file" />
or winforms PictureBox:
<wfi:WindowsFormsHost>
<winForms:PictureBox x:Name="pictureBoxLoading">
</winForms:PictureBox>
</wfi:WindowsFormsHost>
However, I'd recommend finding a way to do this in WPF. Have a look at StoryBoards and animations. Without knowing what you're trying to achieve or why you want to do this it's hard to advise further.
Simply Right Click on .gif file and change two properties:
Build Action : Embedded Resource
Copy To Output Directory : Copy if Newer
Then
<MediaElement x:Name="myGif" UnloadedBehavior="Manual" Source="giphy_s.gif" MediaEnded="MediaElement_MediaEnded"/>
and set Event For Continue Running
private void MediaElement_MediaEnded(object sender, RoutedEventArgs e)
{
myGif.Position = new TimeSpan(0, 0, 1);
myGif.Play();
}