I would like to create some colors as my WPF background, but I have 2 issues with that:
When I resize windows, coloring being resized with it. I would like to have it static.
My colors are specific: They are not toned, they should look something like this:
But the problem is: When I create a gradient in WPF, color changes are kind of blurred.
I have tried to do it that way :
<Window.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#70116B" Offset="0" />
<GradientStop Color="#70116B" Offset="0.4" />
<GradientStop Color="#BBD909" Offset="0.4" />
<GradientStop Color="#BBD909" Offset="0.5" />
<GradientStop Color="#0093DD" Offset="0.5" />
<GradientStop Color="#0093DD" Offset="0.52" />
<GradientStop Color="White" Offset="0.52" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Window.Background>
But like I said: it's not what I want
What you want to achieve isn't a gradient. But i would suggest you to use something like below:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.02*"/>
<ColumnDefinition Width="0.48*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="#70116B"/>
<Grid Grid.Column="1" Background="#BBD909"/>
<Grid Grid.Column="2" Background="#0093DD"/>
<Grid Grid.Column="3" Background="#FFFFFF"/>
</Grid>
Hope this helps!
Related
I want to use LinearGradientBrush to horizontal fill my Rectangle on canvas.
My code:
<Rectangle Width="200" Height="200">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Blue" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
But I notice that the left-most color of red is not #FFFF0000, and it was #FFFE0000
So did anyone know why this happen?
Gradient is drawn using interpolation, so it tends to the color you choose but it does not need to draw it exactly. It also depends on the size of the element for which you use the gradient.
Workaround - set Offset property as below:
<Rectangle Width="200" Height="200">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="Red" Offset="0.01" />
<GradientStop Color="Blue" Offset="0.99"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
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.
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?
In my UI, I have a big grid with two columns and one row. in the right column, I have a grid with three rows where in the top row I have a user control, and in the two bottom rows I have two Expander objects, each containing an ItemsControl with a list that gets populated in runtime. Sometimes, that list gets really long and "spills" from the screen towards the bottom.
What I want to do is to allow the user to see both expanders, be able to expand or collapse them while keeping them both in sight. I tried wrapping them in WrapPanels or StackPanel but to no avail.
Here's some code to help explain my problem:
<Grid Grid.Row="1" x:Name="grid1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Expander Grid.Row="0" Header="Expander 1" x:Name="expander1" FontSize="14" IsExpanded="True">
<Expander.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC4C4C4" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Expander.Background>
<ContentPresenter Content="{Binding ViewModel.OpenAlerts, ElementName=m_viewControl}" ClipToBounds="True"/>
</Expander>
<Expander Grid.Row="1" x:Name="expander2" Header="Expander 2" FontSize="14" IsExpanded="True">
<Expander.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC4C4C4" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Expander.Background>
<ContentPresenter Content="{Binding ViewModel.ClosedAlerts, ElementName=m_viewControl}" ClipToBounds="True"/>
</Expander>
</Grid>
Any assistance or tips will be highly appreciated!
Thanks,
John.
It's really not clear what kind of UI elements you have in the Expanders, but a ListBox for example works just fine, it will show scrollbars when the number of items is larger that the allocated space in the Grid row.
But you can also wrap you list of items in a StackPanel inside a ScrollViewer, which also works fine:
<Expander Grid.Row="0" Header="Expander 1" x:Name="expander1" FontSize="14" IsExpanded="True">
<Expander.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC4C4C4" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Expander.Background>
<ScrollViewer>
<StackPanel>
<TextBlock>Test</TextBlock>
<TextBlock>Test</TextBlock>
<TextBlock>Test</TextBlock>
<!-- etc.. -->
<!-- etc.. -->
</StackPanel>
</ScrollViewer>
</Expander>
That should also work for you.
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.