I've a toggle button :
<Label x:Name="Text" FontWeight="Bold" Foreground="#FF1B6625" Margin="30,0,0,0"
FontSize="15" Background="#0016792C" Content="pause"
FontFamily="/UIapp;component/Resources/Fonts/#Arial"
VerticalAlignment="Top" Height="40"
HorizontalAlignment="Left"/>
<Image x:Name="Icon"
Width="14" Height="14"
Margin="10,8,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"
Source="{DynamicResource PlayIcon}">
</Image>
and in ControlTemplate.Triggers i have :
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Icon" Property="Source" Value="{DynamicResource PauseIcon}" />
<Setter TargetName="Text" Property="Content" Value="play"/>
<Setter TargetName="Text" Property="Margin" Value="25,0,0,0" />
</Trigger>
</ControlTemplate.Triggers>
but from some reason, when i click on the button, i get a different font than it was before the click.
any idea for the reason ?
thanks
Cant understand the relation between Label and toggle button.
For font change, try using Snoop tool.
This may help you in understanding the cause of font change.
Related
I am trying to build a text filter for a list in a popup, and notify the user when the filter is active by changing the color of the button that opens the popup.
I am using an MVVM lite setup and a XAML style sheet to reference the desired styles. Up until this point I have created the popup and the controlling button, and I have been able to put a mouse over trigger on the button and have it work. However when I tried to have a datatrigger set to the value of the textbox in the popup, it does not respond at all.
Here is the XAML code in the View for the button and the popup:
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Center" >
<TextBlock HorizontalAlignment="Center" Text="Filter Popup" />
<Button x:Name="PopUpControl" Tag="popup" Style="{StaticResource FilterButtonStyle}" Command="{Binding OpenPopupCommand}" IsEnabled="{Binding IsFilterEnabled, UpdateSourceTrigger=PropertyChanged}" Margin="2,1,2,1" VerticalAlignment="Top"/>
</StackPanel>
<Popup x:Name="textPopup" IsOpen="{Binding IsFilterPopupOpen, Mode=TwoWay}" PlacementTarget="{Binding ElementName=PopUpControl}" Placement="Bottom" Width="Auto" StaysOpen="False" Margin="2 2 2 2">
<TextBox x:Name="TextValue" Grid.Column="0" BorderThickness="1" Style="{StaticResource WatermarkedTextBox}" Margin="2,4" VerticalAlignment="Center" Tag="Text Filter" Text="{Binding FilterSearch, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
<Button Grid.Column="4" Style="{StaticResource SearchIconStyle}" IsEnabled="{Binding FilterEnabled, Mode=TwoWay}" Command="{Binding ApplyFilterCommand}" Margin="19,6" Grid.ColumnSpan="2" />
</Grid>
</Popup>
Here is the style for the button:
<Style x:Key="SortButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="4,0,4,0" />
<Setter Property="Tag" Value="Default" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
Padding="4,2"
CornerRadius="3"
Background="{DynamicResource PaleBlue}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_filter}" />
</Border.OpacityMask>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="{DynamicResource ColumnHeaderFilterColor}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What I would like to happen, is when the element "TextValue" has a value in the Text field, the primary background color for the "border" changes color. Any help would be greatly appreciated.
You could use a DataTrigger that binds to the FilterSearch source property and sets a property if returns an empty string or null:
<ControlTemplate TargetType="Button">
<Border Name="border"
Padding="4,2"
CornerRadius="3"
Background="Green">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_filter}" />
</Border.OpacityMask>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding FilterSearch}" Value="">
<Setter TargetName="border" Property="Background" Value="{DynamicResource PaleBlue}" />
</DataTrigger>
<DataTrigger Binding="{Binding FilterSearch}" Value="{x:null}">
<Setter TargetName="border" Property="Background" Value="{DynamicResource PaleBlue}" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I am new to wpf. Actully i want to change button icon(play.ico/stop.ico).
when i click the button it changes status(status is database column) value 'Online' to Offline, or Offline to Online.
It updating in database also but
I want to show when status is online buttton should show stop.ico and when I status is offline button should show play.ico.
How to achieve this? I tried with below code but its not working. please help and suggest what i am missing something.
//Xaml code
<StackPanel Margin="0 0 0 0" Grid.Column="5" Grid.Row="0" Grid.RowSpan="2">
<Button Name="Ignition_Button1" Click="Ignition_Button1_Click_1" Width="35" Height="35" Margin="16,5,16,0"
Style="{DynamicResource CircleButton}"
Command="{Binding StartStopCommand}">
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock FontWeight="Bold"
Text="Start or Stop Control Center" />
</StackPanel>
</ToolTip>
</Button.ToolTip>
<StackPanel Orientation="Vertical">
<Rectangle Width="15" Height="15" StrokeThickness="0">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="{StaticResource play.ico}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Status, UpdateSourceTrigger=PropertyChanged}" Value="Online">
<Setter Property="Fill" Value="{StaticResource stop.ico }" />
</DataTrigger>
<DataTrigger Binding="{Binding Status, UpdateSourceTrigger=PropertyChanged}" Value="Offline">
<Setter Property="Fill" Value="{StaticResource play.ico}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</StackPanel>
</Button>
</StackPanel>
Several things I would suggest here.
Rather than ico which are bitmap and will have jaggies, I would recommend geometries and paths.
With a button which has two states you toggle between then a togglebutton is a good candidate.
Below I put my two geometries in resources of my togglebutton.
These are more usually put into a resource dictionary (along with the many other geometries used for iconography) and merged in app.xaml.
<ToggleButton IsChecked="True"
IsThreeState="False"
>
<ToggleButton.Resources>
<Geometry x:Key="StopGeom">
M0,0L32,0 32,32 0,32z
</Geometry>
<Geometry x:Key="PlayGeom">
M0,0L16,8 32,16 16,24 0,32 0,16z
</Geometry>
</ToggleButton.Resources>
<Path Fill="Black"
Stretch="Uniform"
Margin="4">
<Path.Style>
<Style TargetType="Path">
<Setter Property="Data" Value="{StaticResource PlayGeom}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="True">
<Setter Property="Data" Value="{StaticResource StopGeom}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</ToggleButton>
This needs more work but should give you the idea of one way to do this.
For more about layout and geometries:
https://social.technet.microsoft.com/wiki/contents/articles/32610.wpf-layout-lab.aspx
I don't know how you're styling the shape of your button, but I use this one to emphasise to wpf newbies what lookless controls means:
https://social.technet.microsoft.com/wiki/contents/articles/29866.aspx
I am developing a WPF project. I want to remove highlight (it is like blue in picture) on button if isMouseHover of Button is true. And I am not sure it is called highlight. Maybe it is probably effect, focus etc.. I added BorderBrush is transparent but it didn't work. The code is as follows:
<Image x:Key="LoginImg" Source="..\Images\Login\oturumac.png"
Stretch="Fill"/>
<Image x:Key="LoginImg_RollOver" Source="..\Images\Login\oturumac_rollover.png"
Stretch="Fill"/>
<Style x:Key="LoginButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content" Value="{DynamicResource LoginImg_RollOver}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Content" Value="{DynamicResource LoginImg}"/>
</Trigger>
</Style.Triggers>
</Style>
Picture is as follows. First picture when IsMouseOver is true:
How can I solve?
Button code is as follows:
<Button Background="Transparent" BorderBrush="Transparent" Style="{DynamicResource LoginButtonStyle}" Click="btnLogin_Click" HorizontalAlignment="Center" VerticalAlignment="Top" Width="180" Grid.Column="1" Grid.Row="4" x:Name="btnLogin" TabIndex="2"/>
You'll need to provide a new ControlTemplate for the Button to get rid of the default look and feel. You can just replace the default Button ControlTemplate with a plain Image control and replace your Style Triggers with ControlTemplate Triggers. Try this:
<Button>
<Button.Template>
<ControlTemplate>
<Image Name="Image" Stretch="None"
Source="pack://application:,,,/AppName;component/Images/Login/oturumac.png" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Image" Property="Source" Value="
pack://application:,,,/AppName;component/Images/Login/oturumac_rollover.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
I have wpf Expander control and I want change background color of Header when I do mouse over on it.
Here is my control:
<Expander Margin="0" ExpandDirection="Right">
<Expander.Header>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image Source="placeholder_imageObject.png" Stretch="Uniform" Margin="6,0,0,0" Width="36" Height="36" VerticalAlignment="Center"/>
<ContentPresenter Content="Image" VerticalAlignment="Center" Margin="5,0,0,0"/>
<Path Data="{StaticResource RightArrowGeometry}" Fill="Black" Margin="14,0,0,0" VerticalAlignment="Center">
</Path>
</StackPanel>
</Expander.Header>
<Grid Margin="10,0,0,0" Background="White">
<controls:SymbolController x:Name="dgSymbolControl">
</controls:SymbolController>
</Grid>
</Expander>
Pls Help
thanks
Sai
U can give your StackPanel within in your "Expander.Header" an Style with Trigger like this:
<Style x:Key="MyCustomStackPanelStyle" TargetType="{x:Type StackPanel}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
I'm creating a standalone WPF app with multi-language support. I've found some great resources (mostly on SO) on how to store and access the strings as needed. This part is pretty straightforward and doable, but I'm fuzzy on how to take care of screen layout issues.
I'm using some custom images to skin up my app for buttons, etc. For instance, here's a button with some text within:
<Button
Canvas.Left="33"
Canvas.Top="484"
Style="{StaticResource SmallButtonBase}">
<TextBlock
FontSize="20"
FontWeight="Bold"
TextAlignment="Center" FontFamily="Helvetica">
Enter
</TextBlock>
</Button>
Now here is the same button with text from another language:
<Button
Canvas.Left="33"
Canvas.Top="484"
Style="{StaticResource SmallButtonBase}">
<TextBlock
FontSize="20"
FontWeight="Bold"
TextAlignment="Center" FontFamily="Helvetica">
Enterenschtein
</TextBlock>
</Button>
So my question is: What is a good method to prevent this "overflow" situation. I'd like to have XAML take care of any font resizing or indenting that is needed automatically so that I don't have to tweak the UI for each language I'm supporting.
Any insight is appreciated!
p.s. Here's the XAML for SmallButtonBase. It basically defines what happens when the button has focus or is pressed. A different image is used for each case.
<Style x:Key="SmallButtonBase" TargetType="Button">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="Container">
<Image x:Name="Img" Source="/Resources/Elements/Buttons/10.png" Margin="6" />
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="Img" Property="Source" Value="/Resources/Elements/Buttons/11.png" />
<Setter TargetName="Img" Property="Margin" Value="0" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsKeyboardFocused" Value="True" />
<Condition Property="IsPressed" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Img" Property="Source" Value="/Resources/Elements/Buttons/12.png" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try putting a viewbox around your contentpresenter with a fixed width and height that matches your image for the button
like this
<Viewbox Width="85" Height="85">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Viewbox>
I think then you can allow WPF to scale the font to fit in that location.