I cannot for the life of me figure out how to change a ToggleButton image when clicked. I have looked up countless examples and they are all outdated and no longer work. Or if they do I cannot get them to work. Does anyone have an up to date example I could look at or any suggestions?
I tried doing it in the code behind first. The example I found used a BitmapImage but this is not possible anymore as the BeginInit method cant be used due to security reasons.
Next I tried numerous style triggers but I get way to many compile errors even when they are directly copied and modified to fit the correct parameters. So I am stuck. I cant figure out how to use an EventTrigger to do it nor do any older examples seem to work. Anyone have any ideas?
Why not something like:
<ToggleButton x:Name="b">
<Image Src="myImage.png" Visibility="{Binding ElementName=b,Path=IsChecked,Converter="{StaticResource BooleanToVisibilityConverter}}"/>
<Image Src="myOtherImage.png" Visibility="{Binding ElementName=b,Path=IsChecked,Converter="{StaticResource BooleanToVisibilityConverter,ConverterParameter=Invert}}"/>
</ToggleButton>
Where you have a boolean to visibility converter that can accept a parameter to invert the bool.
Edit:
You'll need to define a converter so that it can convert the bool? from the IsChecked property to a Visibility enum. That's what all the binding code does. There is a basic implementation here that will convert to Visibility.Visible when true and Visibility.Collapsed when false. You need to add a check for the parameter so that it inverts the visibility when Invert is passed (to toggle between two images).
The other way to do this is to define images in the style and use the visual states for Checked and Unchecked to flip flop the images. You can apply a style to multiple buttons but it's hard to vary the images per-button (what my solution does).
This is how you set up a Resource
XAML
<!-- Place this in your window -->
xmlns:converters="clr-namespace:NameSpace"
<!-- Place this above your root UI -->
<Window.Resources>
<converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>
Then use the converter here BooleanToVisibilityConverter
you can use ImageToggleButton and ImageToggleButtonSideBySide (if you want a Mac-style toggle [or 2-state radio could call it] button) from ImageButtons project of ClipFlair project codebase
Related
I'm using WPF (and the MVVM framework) to create an interface which has a slider on it.
<Slider Value="{Binding MotorDemandSpeed}" Maximum="3500" />
I'm trying to hide the track part on the slider so that you are left with just the 'thumb tack'. This is what the slider currently looks like (styles are controlled by a theme):
I've looked around at various methods, however I can't find a method that changes only a single slider.
Help is appreciated.
You need to set the Template property of this particular Slider instance to be able to override its ControlTemplate:
<Slider Value="{Binding MotorDemandSpeed}" Maximum="3500">
<Slider.Template>
<ControlTemplate TargetType="Slider">
<!-- define the custom template without a track here... -->
</ControlTemplate>
</Slider.Template>
</Slider>
In order to change the appearance of a control you will need to modify the control template. Each control is made up of many parts, and each part many objects. You can modify individual parts (such as the track) with the correct x:Key and TargetType.
This Question has an example of modifying a scrollbar control template, which is most likely similar to the template of this slider you have. The first step would be to identify the Xaml file in your theme which this slider uses and find the parts that define the trackbar, thumb, etc. From there you should be able to recreate the control to your liking, or just completely remove parts you do not need.
Are you using any third party controls that may have information on how to edit their themes? Perhaps try investigating Modifying Control Templates to get a better understanding of control templates.
Here is the MDSN page for the slider control template, you may find this useful.
I have a simple button, and I would like it to have the behavior of a "sticky" button, such as it visually has two states (much like a switch). In other words, I would like it to maintain its pressed style even after I release the mouse button, but it would have to be clickable.
Is there a way to easily do it in WPF? I'm using Fluent but I could change it if needed.
<Fluent:Button Header="myButton" Command="{Binding ToggleCommand}" SizeDefinition="Small">
<Fluent:Button.Icon>
<Grid Width="16" Height="16">
<Image Source="../Images/16x16/icon.png"/>
</Grid>
</Fluent:Button.Icon>
</Fluent:Button>
Something like this:
1-
2-
PS:
I'm using MVVM, and in the Command, I'm checking and changing a bool flag to know what state the button currently is. I would be able to bind it to a button property, if it helps in any way.
Turns out there is a component ToggleButton that does exactly what I was looking for. Silly me for not knowing it existed in the first place.
I have found very little information about this matter. Know that I am a newbie to C# and WPF:
I have a stack panel defined in a XAML file as such :
<StackPanel Orientation="Vertical" >
<TextBlock Text="Locale: " VerticalAlignment="Center"/>
<ComboBox x:Name="comboLocale" Width="60" VerticalAlignment="Center" SelectionChanged="comboLocale_SelectionChanged"/>
</StackPanel>
I want to disable the highlighting that happens when I MouseOver the stack panel, which creates a blue color inside the StackPanel for some reason. I don't have any special style set up yet. Some threads talked about setting OverridesDefaultStyle to TRUE, but this didn't seem to change anything. Also, StackPanel do not have a ControlTemplate available, so most of the solutions I found couldn't be applied since they refer to a Button or TextBlock.
Any input on the matter would be greatly appreciated!
-Regards
StackPanels in general have no visual representation and are just layout containers which control placement of other elements. Given that you haven't set anything like Background on your StackPanel, it isn't what's causing the highlight you're seeing unless some other part of your XAML or code is modifying it. The behavior you describe sounds like the default behavior of a Button but without seeing more of your code it's hard to tell where the behavior is coming from.
Since you mentioned in a comment you've found out you're actually looking at the expected behavior of a Menu as your culprit. You'll just need to edit the MenuItem Control Template, more specifically the IsHighlighted that's causing your highlight. You'd likely find something like this helpful.
Or there's lots more various information found with a quick search for customizing a WPF Menu / MenuItem, hope this helps.
I have a boolean property in my ViewModel, named lets say IsNotSupported that is used to show some warning information if a sensor is not supported. Therefore I use a BooleanToVisibilityConverter, that is added in the ressources:
<phone:PhoneApplicationPage.Resources>
<local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</phone:PhoneApplicationPage.Resources>
and bind it to the stackpanel containing the warning:
<StackPanel x:Name="NotSupportedWarning" Visibility="{Binding IsNotSupported,
Converter={StaticResource BooleanToVisibilityConverter}}">
That works all quite well, but when loading the page, and the sensor is supported, the warning appears for just a fraction of a second and disappears afterwards. I know that this flickering is caused by the binding not having happened yet and therefore defaulting to visible.
That flicker it is annoying as hell... It should rather default to collapsed and be made visible only after it is clear that the warning should be shown. Also, this would avoid a second layouting pass after the binding and could therefore have positive performance impacts.
I had this problem over and over, and found nothing about it in the internet until I found this SO question, that is closely related, but is not found if searched for windows phone instead of silverlight. Both the problem and the solution might seem simple, but I really bugged me quite a long time, so I thought it might be a good idea to write a Q&A-style question about it to help others that are facing the same issue.
The solution is simple after you have seen it. You can control the default value of the binding (if the binding didnt happen yet) with FallbackValue. Your stackpanel XAML would look like:
<StackPanel x:Name="NotSupportedWarning" Visibility="{Binding IsNotSupported,
FallbackValue=Collapsed,
Converter={StaticResource BooleanToVisibilityConverter}}">
This way you get rid of the flicker and it does not have to be relayouted after the binding, if the warning stays hidden.
you can bind directly to a Visibility type of property instead of boolean and keep that property to collapsed by default plus you can implement INotifyPropertyChanged
This is a tough question, but I'll try to explain anyway...
I have a custom control window that is used all over my applicaton. The reason I did this is because I wanted the various windows and dialog boxes to be fully customizable across my program. I.e., the minimize, maximize, close button and frame are all custom. This window is templated inside my generic.xaml. Now this works and it's all good. The idea I got was from http://www.codeproject.com/KB/WPF/CustomFrames.aspx
Now the users of this custom window are user controls in their xaml they basically use MyWindow as their root element:
<MyWindow>
....
</MyWindow>
But now what I'm trying to do is "inject" certain elements into MyWindow from the User Control's xaml. MyWindow would simply have a container for hosting them. For example, they might want to inject a toolbar button that appears right next to the minimize button. So for example, I might have a user control that does the following (where MyWindow is the root element):
<MyWindow>
<MyWindow.ToolBar>
<Button x:Name="BlaBla"/>
</MyWindow.ToolBar>
</MyWindow>
This would put "blabla" right next to the minimize button for example. But I'm wondering if it's even possible to do this. I.e., the whole MyWindow.ToolBar thing. Is there a construct for this, is this an attached property or something weirder?
It definitely is possible, depends on your choice of types for the DependencyProperty. You could use IEnumerable and bind the MyWindow.ToolBar dp to the ItemsSource on your internal ToolBar.
<ControlTemplate>
<!-- ... snipped down to the ToolBar ... -->
<ToolBarTray>
<ToolBar x:Name="PART_ToolBar" />
</ToolBarTray>
</ControlTemplate>
With the appropriate code in OnApplyTemplate to pull PART_ToolBar and create new Binding for the ItemsSource.
EDIT: rereading your question it appears that I missed that you wanted to add this elsewhere. My suggestion then would be to use this as an object dependency property, with a ContentPresenter bound to the MyWindow.ToolBar with a Visibility set if the binding is not {x:Null}.