Develop Reference

WPF hide slider track

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.

WPF Extended Toolkit BusyIndicator Text is cutoff

When I use the WPF Extended Toolkit BusyIndicator in any other application, I have no problems. Using it in my current application, the text is cut off. I have been playing around with the properties on the BusyIndicator. Here is the xaml:
<xctk:BusyIndicator IsBusy="True" Panel.ZIndex="1000"/>
I wanted to post a picture so you could see what it looks like. The "Please Wait..." text is too low and the bar is laying on top of it. Has anyone experienced this before? I am stumped on what to do. I can't figure out how to change the height of the content inside the box, if that is even the issue.
Edit:
It currently displays as the following:
But I want it to display without the text being covered:
The designer displays it how I want it to display but the application, while running, displays it as shown in image one.

I think that your problem is that you have changed the default textblock size. But you can also fix with the BusyContentTemplate
For example I make the text bigger and red:
<xctk:BusyIndicator IsBusy="True" Panel.ZIndex="1000" >
<xctk:BusyIndicator.BusyContentTemplate>
<DataTemplate>
<TextBlock Foreground="Red" FontSize="15">Please Wait</TextBlock>
</DataTemplate>
</xctk:BusyIndicator.BusyContentTemplate>
</xctk:BusyIndicator>
You can also change the textblock for whatever you want.
I hope this can help you.

I discovered the issue. The underlying datatypes in the WPF Extended Toolkit's BusyIndicator is a grid. One of the grid's properties were being set in a global style file that I was unaware of...

Create a popup on templated content not using a ToolTip [WPF]

Introduction
For a project I am working on I had to create a ContentControl which must display a ToolTip/Popup when some provided content is not allowed.
For example:
A TextBox is wrapped inside my ContentControl, the ContentControl provides the logic of displaying a ToolTip when unwanted characters are being typed in the TextBox.
A ToolTip would appear displaying the unwanted characters and after x-period of time, the ToolTip would dissapear.
However using the ToolTip approach led to unexpected and unwanted behavior;
on mouse over an empty tooltip is shown (we could get this to close immediately, but it was still visible for a moment)
when the mouse left the control, the tooltip was hidden
the slide effect could not be controlled precise enough, so depending on the location of the tooltip (above or below) the effect was correct or not.
Therefore I need to have another solution which does not rely on the ToolTip.
Example code
The Xaml structure is like
<ContentControl x:Class="xxx.yyy.zzz.UserControls.MyContentControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
... more namespaces ...>
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.ToolTip>
...
And it's usage is like:
<UserControl:Class="xxx.yyy.UserControls.TextBoxControl"
xmlns:cn="clr-namespace:xxx.yyy.zzz.UserControls">
<cn:MyContentControl Info="{Binding ..}" x:Name="MyContentControlName">
<TextBox Text="{Binding Text}" .."/>
</cn:MyContentControl>
Where Info is a dependency property used by my ContentControl's codebehind and for which the input binding is provided by the TextBoxControl's ViewModel.
On a side note:
For our validations we rely on Validation Error Style in WPF, similar to Silverlight and an implementation of How can I move a WPF Popup when its anchor element moves?
I have tried to incorporate some of the template code from the first link mentioned and that resulted only in display a minuscule popup, not displaying anything and neither giving me the behavior I was expecting.
As can be seen in the code snippet, formerly I was using ContentPresenter.ToolTip, unfortunately there is no such thing a ContentPresenter.Popup, whereas I believe a ToolTip is a popup
The question
So how would it be possible to create popup like behavior especially for this piece of code? (this will represent the TextBox on the WPF UI)
<ContentPresenter Content="{TemplateBinding Content}">

How can I prevent flickering when binding a boolean to the visibility of a control

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

Change ToggleButton image when clicked Silverlight

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