I have a Grid that I am essentially using as a button which I need to change the backcolor gradient to another gradient while the mouse button is down. When the mouse button is released, change it back to the original color. Additionally, I will need to perform some action as well. I am trying to accomplish this in the code behind but maybe this can be done in the xaml? I am going about it this way as customizing a button to the look and feel that I needed was proving to be more difficult. How can I go about this?
XAML:
<DockPanel LastChildFill="True" Width="40" Height="40" Margin="22,20,22,5">
<Border BorderThickness="0,1,0,0" DockPanel.Dock="Top" BorderBrush ="#747474" />
<Border BorderThickness="1,0,0,0" DockPanel.Dock="Left">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#747474" Offset="0"/>
<GradientStop Color="#464648" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<Border BorderThickness="0,0,1,0" DockPanel.Dock="Right">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#747474" Offset="0"/>
<GradientStop Color="#464648" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<Border BorderThickness="0,1,0,0" DockPanel.Dock="Bottom" BorderBrush ="#464648" />
<Grid Width="38" Height="38">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#585858" Offset="0"/>
<GradientStop Color="#464648" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="/common/printer_20.png" Stretch="None" />
</Grid>
You have several ways to achieve this.
Use a Style and Visual States. Problem: It would be dirty executing a command.
Add a Behavior to the Grid. Assign the Mouse Events and change Background in code. Additionally you can execute a Command.
Use a Trigger to change the background. Use MVVM Light to execute a Command.
Which way would you prefer?
Related
I have created a ControlTemplate for a TextBox that includes a label for it. However, When I try to use Tab to navigate the controls I have to press tab twice to enter the textbox field, as if it's focusing on another element inside. I tried messing the labels focusability and what not but that doesn't seem to be the issue. Here is the code:
<ControlTemplate x:Key="custTextbox" TargetType="{x:Type TextBox}">
<Canvas x:Name="customTextbox">
<Border CornerRadius="3, 0, 0 ,3" BorderThickness="1, 1, 0, 1"
Height="30" x:Name="brdTextboxLabel" Width="98">
<Border.BorderBrush>
<LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
<GradientStop Color="#3C3F48" Offset=".88"/>
<GradientStop Color="#9CA1A8" Offset=".96"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint=".5, 0" EndPoint=".5, 1">
<GradientStop Color="#414447" Offset="0"/>
<GradientStop Color="#4E525B" Offset=".08"/>
</LinearGradientBrush>
</Border.Background>
<Canvas>
<Rectangle Height="24" x:Name="rectangle3" Stroke="#636369"
Width="1" Canvas.Left="96" Canvas.Top="2" />
<Label Canvas.Left="0" Padding="9,6.5,0,0" Foreground="#BABBBF"
FontWeight="Bold" Canvas.Top="0" FontSize="11"
Content="{TemplateBinding Tag}" Height="28"
x:Name="lblTextboxHeader" Width="92" />
</Canvas>
</Border>
<!-- ========================================= -->
<Border CornerRadius="0,3,3,0" BorderThickness="0,1,1,1" Canvas.Left="98"
Height="30" x:Name="brdTextbox" Width="348">
<Border.BorderBrush>
<LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
<GradientStop Color="#3C3F48" Offset=".88"/>
<GradientStop Color="#9CA1A8" Offset=".96"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint=".5, 0" EndPoint=".5, 1">
<GradientStop Color="#414447" Offset="0"/>
<GradientStop Color="#4E525B" Offset=".08"/>
</LinearGradientBrush>
</Border.Background>
<Canvas>
<TextBox TabIndex="0" Background="Transparent" CaretBrush="#8C8CA1"
FontSize="16" Padding="4, 3, 0 ,0" BorderBrush="Transparent"
Foreground="#D4D5DA" Canvas.Left="0" Canvas.Top="-1"
Height="30" x:Name="textBox1" Width="347"/>
</Canvas>
</Border>
</Canvas>
</ControlTemplate>
Sorry if it's a mess of a ControlTemplate, it was the first I had ever made when starting wpf/xaml.
Thank you for your time!
HA! Figured it out while solving an issue on another control.
The problem was I, essentially, had 2 TextBoxes each time I used the template.
a simple map would be:
<TextBox>
<ControlTemplate>
<Label/>
<Textbox/>
</ControlTemplate>
</TextBox>
So I just had to make the control I put in the window have KeyboardNavigation.IsTabStop="false" So it would pass that textbox and go to the one inside my ControlTemplate.
This is probably a dumb question but I have a Checkbox user control that I place in some xaml and when I run the code, the checkbox looks like a radio button instead of a checkbox.
xaml:
<Grid>
<StackPanel Orientation="Vertical" Margin="0,7,0,0" >
<local:ControlCheckbox x:Name="cbAutoZoom" CheckBoxName="AutoZoom"/>
</StackPanel>
</Grid>
ControlCheckbox:
<StackPanel Orientation="Horizontal" Margin="0">
<Viewbox x:Name="vbCheckbox" Margin="0" Height="60">
<CheckBox x:Name="cbCB" Background="{x:Null}" Foreground="Black" Checked="cbCB_Checked" Unchecked="cbCB_Unchecked">
<CheckBox.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF7B7979" Offset="1"/>
<GradientStop Color="White"/>
</LinearGradientBrush>
</CheckBox.BorderBrush>
</CheckBox>
</Viewbox>
<TextBlock x:Name="tbCheckBoxName" Text="xxxxxx" FontSize="13.333" VerticalAlignment="Center" TextWrapping="Wrap" Margin="4,0,0,0" MaxWidth="230" Height="18" >
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF646464" Offset="0"/>
<GradientStop Color="White" Offset="0.967"/>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
Unfortunately my reputation is not high enough to post a picture of my problem...
I didnt see any issue here. I am able to see same checkbox as you are expecting.
Thanks to everyone...figured out my problem...I was using a Theme and apparently that is how the checkbox was rendering as a Radiobutton. I commented out the Theme and the checkbox rendered as Hemant's code above.
See I knew it was a dumb question...sorry to have bothered y'all!
I have an image with a transparent background which I would like to overlay on my window as an image behind all of the controls.
My window background already has a gradient brush, but what I can tell by Googling and experimenting, you cannot have two background brushes.
Here is the XAML which isn't working. What do you suggest? Maybe there is another way of setting the image.
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFF7F7F7"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
<ImageBrush ImageSource="/Images/Arrow.png">
</ImageBrush>
</Window.Background>
You may put an Image control into a top-level Grid, below all other controls:
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFF7F7F7"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Image Source="/Images/Arrow.png">
<Grid>
... all other controls go here
</Grid>
</Grid>
I'm trying to make a stylish progress bar, but I'm having a problem with its vertical version. A picture is worth a thousand words:
http://img402.imageshack.us/img402/2033/progressq.gif
Everything I've attempted so far has resulted in Wrong. How do I achieve Right? I'd prefer a XAML only solution unless it's slow or causes flickering when the progress bar is updated many times per second.
Here's one alternative:
<Border BorderBrush="Black" BorderThickness="2" CornerRadius="3" Padding="3">
<Grid Width="20" Height="100">
<Grid Height="{Binding ProgressValue}" VerticalAlignment="Bottom">
<Grid Height="100" VerticalAlignment="Bottom">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Grid>
</Grid>
</Border>
Note the third line from the top, that is where you bind your progress value.
I have application where default Window's borders switched off
Window tag definition looks like this:
<Window x:Class="TEA.UI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Title" WindowStyle="None" AllowsTransparency="True" Background="Transparent">
Inside Window tag, there is Grid panel, it contains several Rectangle shapes and few other grids.
It looks like this:
<Grid>
<!-- WINDOW BACKGROUND -->
<Rectangle Stroke="#FF214E80" RadiusX="3" RadiusY="3" ClipToBounds="True">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF193C6C" Offset="0"/>
<GradientStop Color="#FF2A65A4" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- // WINDOW BACKGROUND -->
<!-- HEADER HIGHLIGHT2 -->
<Rectangle HorizontalAlignment="Stretch" Margin="2,2,2,0" VerticalAlignment="Top" Height="62" RadiusX="2" RadiusY="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00193C6C" Offset="1"/>
<GradientStop Color="#4C96ABC3" Offset="0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- // HEADER HIGHLIGHT2 -->
<Grid>
....
</Grid>
These rectangle shapes are used in other window dialogs as well.
My questions are:
How would it be possible to store these recatangles inside WPF resource dictionary?
How would I be able to reference them?
Actually the solution was quite simple
WPF UserControl did the trick for me
You can create a style in your resource dictionary for these items with setters for each property--one included below.
<Style TargetType="{x:Type Rectangle}" x:Key="WindowBackground">
<Setter Property="Stroke" Value="#FF214E80"/>
</Style>
Then in your window you can reference the style as such..
<Rectangle Style="{StaticResource WindowBackground}"/>