I have following UserControl defined in wpf:
<UserControl x:Class="Views.HideShowDetailsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<DockPanel Background="#FFFFF2CC" Name="HideShowDetailsPanel">
<Button Name="hidePatientDetails"
Background="Transparent"
Margin="10,10"
Width="40"
BorderBrush="Transparent"
BorderThickness="0"
DockPanel.Dock="Right"
Command="{Binding Path=HideDetailsCommand}" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Image Source="../Resources/ArrowRight.png" />
</ControlTemplate>
</Button.Template>
</Button>
</DockPanel>
</UserControl>
And I need to change it's content by adding image canvas and another button when Command is activated. How this can be achieved in wpf?
You can do it by adding the two new controls to a container, say, StackPanel somewhere inside your UC. Then assign the following style to the StackPanel:
<Style x:Key="stackStyle" TargetType="StackPanel">
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsEnabled, ElementName=hidePatientDetails}" Value="False">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
Related
I got the following issue which I need some help with.
(The code is simplified to show the problem I'm having)
I got a repeat button with a contenttemplate and style:
<UserControl x:Class="SR.Testing.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" SnapsToDevicePixels="True">
<StackPanel>
<RepeatButton x:Name="IncreaseButton" ContentTemplate="{StaticResource ArrowUpNormal}" Style="{StaticResource IncreaseRepeatButtonStyle}" Click="IncreaseClick" />
</StackPanel>
</Border>
</Grid>
</UserControl>
This is the datatemplate and the style:
<Geometry x:Key="UpArrowGeometry">M0,5 L4.5,.5 9,5 6,5 4.5,3.5 3,5 z</Geometry>
<DataTemplate x:Key="ArrowUpNormal">
<Path Width="18"
Height="10"
Stretch="Fill"
Data="{StaticResource UpArrowGeometry}"
Fill="DarkOrange"
SnapsToDevicePixels="True"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Focusable="False" />
</DataTemplate>
<DataTemplate x:Key="ArrowUpDisabled">
<Path Width="18"
Height="10"
Stretch="Fill"
Data="{StaticResource UpArrowGeometry}"
Fill="Green"
SnapsToDevicePixels="True"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Focusable="False" />
</DataTemplate>
<Style x:Key="IncreaseRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Height" Value="40" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="ContentTemplate" Value="{StaticResource ArrowUpDisabled}" />
</Trigger>
</Style.Triggers>
</Style>
After starting the application, the repeatbutton looks as intended (darkorange):
However, when I disable the RepeatButton (via codebehind) with "IncreaseButton.IsEnabled = false;"
I expected my style trigger to turn the arrow green:
But instead I get this (Arrow stays orange and the background turns white/gray):
What is causing this behaviour and how do I fix this? Thanks!
The Background turns white/gray because there is a ControlTemplate trigger defined in the base style. To remove this you need to override the base style. But then you need to create a new template.
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<!-- Template -->
</Setter.Value>
</Setter>
Link to the base style with template
And the reason why the arrow stays orange is that you have set the template directly on the button. This overrides the property in the style and also the triggers. To fix this just add (and remove the property on the button)
<Setter Property="ContentTemplate" Value="{StaticResource ArrowUpNormal" />
to your style.
i am trying to trigger IsMouseOverproperty of an element and chnging the width in XAML and it's working but the problem is if i define the default or static width property in element's tag then this doesn't work. Why ?
Working code
<UserControl x:Class="IntelliVentory.UserControls.SideMenuBarControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:IntelliVentory.UserControls"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:userControls="clr-namespace:IntelliVentory.UserControls"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
Background="{DynamicResource MaterialDesignPaper}"
TextElement.FontWeight="Medium"
TextElement.FontSize="14"
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<ItemsControl Margin="50">
<ItemsControl.Resources>
<Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="300" />
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.Resources>
<materialDesign:ColorZone Name="ColorZone1" Style="{StaticResource ScaleStyle}" Height="50"
Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
<materialDesign:ColorZone Margin="0 5 0 0" Name="ColorZone2" Style="{StaticResource ScaleStyle}"
Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
<materialDesign:ColorZone Margin="0 5 0 0" Name="ColorZone3" Style="{StaticResource ScaleStyle}"
Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
</ItemsControl>
</Grid>
but if now i add width="40" property then this trigger property wont work on first ColorZone Element Name="colorZone1" it won't work .
<materialDesign:ColorZone Name="ColorZone1" Style="{StaticResource ScaleStyle}" width="40" Height="50"
Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
You need to set the default width in the style.
<Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="300" />
</Trigger>
</Style.Triggers>
<Style.Setters>
<Setter Property="Width" Value="40"/>
</Style.Setters>
</Style>
I am trying to write a custom ListBox that will popup a user specifed control at runtime. I have made a custom RadioButton that I want to have display a popup when the user selects one of the buttons in the list
Here Is the xaml for the custom ListBox control. I am trying to use my custom radio button as the ListboxItem:
<ListBox
x:Class="PopUp.SystemAccessPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:System;assembly=mscorlib"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:PopUp"
d:DataContext="{d:DesignInstance local:PanelButton}"
mc:Ignorable="d"
>
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<StackPanel>
<local:PanelButton
x:Name="Button1"
Foreground="{TemplateBinding Foreground}"
GroupName="{Binding GroupName}"
ButtonText="{Binding ButtonText}"
Margin="0,0,0,20"
/>
<Popup
x:Name="PART_Popup"
IsOpen="{Binding IsChecked, ElementName=Button1}"
PlacementTarget="{Binding ElementName=Button1}"
Placement="Absolute"
VerticalOffset="{Binding AbsoluteYPlacement}"
HorizontalOffset="{Binding AbsoluteXPlacement}"
local:BaseExtendedPopup.ClosesOnInput="True"
>
<ContentPresenter/>
</Popup>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<ListBox.Template>
<ControlTemplate>
<Border
BorderThickness="0"
Padding="1,1,1,1"
Background="Transparent"
Name="theBorder"
SnapsToDevicePixels="True"
>
<ItemsPresenter
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
/>
</Border>
<!--
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False" />
</Trigger>
</ControlTemplate.Triggers>
-->
</ControlTemplate>
</ListBox.Template>
</ListBox>
And here I how i want the control to be used:
<usr:SystemAccessPanel Foreground="Pink" Background="Aqua">
<usr:PanelButton
ButtonText="What"
ImageWidth="50"
ImageHeight="50"
Width="40"
GroupName="Test"
AbsoluteXPlacement="900"
AbsoluteYPlacement="100"
>
<usr:UserControl2/>
</usr:PanelButton>
<usr:PanelButton
ButtonText="The Hell"
ImageWidth="45"
Height="20" Width="100"
GroupName="Test"
AbsoluteXPlacement="900"
AbsoluteYPlacement="100"
>
<usr:UserControl1/>
</usr:PanelButton>
</usr:SystemAccessPanel>
However All I end up with is a PaneButton as a Popup =S. What do i need to do to have my usercontrol be in the popup?
I want the mouse cursor to change to a "stop" pointer when I hover over the button, if it's disabled. In case of an enabled button, the following code is working but it's not applicable to a disabled button:
XAML:
<Button x:Name="Button1" Content="Button1" Isenabled="false" />
CS:
Button1.MouseEnter += (s, e) => Mouse.OverrideCursor = Cursors.No;
Since you won't be able to trigger events with a disable control, I suggest placing a transparent rectangle over it, which will handle that for you:
<Button x:Name="Button1" IsEnabled="False"/>
<Rectangle Opacity="0" Fill="Transparent">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Button1, Path=IsEnabled}"
Value="False">
<Setter Property="Cursor" Value="No"/>
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
The rectangle is collapsed when button is not enabled, so that it would allow button events to trigger. When the button is enabled, rectangle becomes visible (with 0 opacity and transparent background) and causes No cursor to appear when moused over.
EDIT:
Per comments, here's a working sample (which also attempts to resolve an issue OP is having with enabled button canceling behavior):
<Window x:Class="WpfApplication.MainWindow"
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"
xmlns:local="clr-namespace:WpfApplication"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
HorizontalAlignment="Center">
<!-- Regular Button-->
<Button Width="120" Height="22" Margin="5"/>
<!--Custom Button-->
<Grid Width="120" Height="22" Margin="5">
<Button x:Name="Button1" IsEnabled="False"/>
<Rectangle Opacity="0" Fill="Transparent">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Button1, Path=IsEnabled}"
Value="False">
<Setter Property="Cursor" Value="No"/>
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Grid>
</StackPanel>
</Grid>
</Window>
Here's the demo:
I recommend creating a custom control using similar XAML, or, at the very least, create a template, so that you may reuse it.
You can't perform any operation on disabled objects.
A user control's background is set, but that background hides the contained controls. How can this be resolved?
<UserControl x:Class="PL_Wpf.CustomControls.Conditioner"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:PL_Wpf.CustomControls"
mc:Ignorable="d" Height="166" Width="349">
<UserControl.Background>
<ImageBrush ImageSource="Conditioner.png" Stretch="None"/>
</UserControl.Background>
<Grid >
<ComboBox x:Name="combo1" HorizontalAlignment="Right" Width="57" Margin="0,68,53.206,70" />
<ToggleButton x:Name="ToggleSwitch" Height="50" Click="ToggleSwitch_Click" Margin="97.205,55,115.206,61" d:LayoutOverrides="Width" >
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content">
<Setter.Value>
<Image Source="../Pics/switch_on.png" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content">
<Setter.Value>
<Image Source="../Pics/switch_off.png" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</Grid>
jsfiddle.net/wgfw1Ld7/
The Margin properties on the controls set themselves when dropped on the design surface. This feature may be needed if adjusting items on a Canvas but are mostly an annoyance when dealing with most Xaml control placement.
Remove the Margin properties to see the controls in their correct location on the grid.