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!
Related
I'm already desperate to find the answer why this happens... here's my code:
ResourceDictionary
<Color x:Key="ControlStrokeColorDefault">#0F000000</Color>
<Color x:Key="ControlStrokeColorSecondary">#29000000</Color>
<LinearGradientBrush x:Key="ControlElevationBorderBrush" MappingMode="Absolute" StartPoint="0,0" EndPoint="0,3">
<LinearGradientBrush.RelativeTransform>
<ScaleTransform CenterY="0.5" ScaleY="-1" />
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.33" Color="{DynamicResource ControlStrokeColorSecondary}" />
<GradientStop Offset="1.0" Color="{DynamicResource ControlStrokeColorDefault}" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Panel
<Grid Background="#29000000">
<WrapPanel Background="#F7F7F7" VerticalAlignment="Center" HorizontalAlignment="Center">
<Border Margin="20" Width="100" Height="60" BorderThickness="2" BorderBrush="{DynamicResource ControlElevationBorderBrush}">
<TextBlock>Ok</TextBlock>
</Border>
<Border Margin="20" Width="100" Height="100" BorderThickness="2" BorderBrush="{DynamicResource ControlElevationBorderBrush}">
<TextBlock>???</TextBlock>
</Border>
</WrapPanel>
</Grid>
As a Result, I get that the gradient is calculated only on the first element... is this a wpf bug or am I missing something?
this is because of ScaleY="-1" in ScaleTransform
Scale creates different sizes at different heights
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.