Develop Reference

WPF Invert Slider Control

does anybody have a idea how to invert the direction of the standard Slider Class in WPF?
Syncfusion or Telerik have some custom Sliders, but either it's not free (Syncfusion) or the Design is not really great. So i'm looking for a Solution with the Standard .NET Class.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Slider x:Name="Slider_Speed_P2" Width="150" Margin="5" TickFrequency="10" TickPlacement="BottomRight" Maximum="150" ValueChanged="Slider_Speed_P2_ValueChanged" />
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock x:Name="Title_Slider_Speed_P2" Text="Ladung"/>
<TextBlock x:Name="Val_Slider_Speed_P2" Text="0"/>
</StackPanel>
</StackPanel>
Basically the Minimum should be on the right, and the maximum should be on the left.
I already tried to switch the Maximum and Mimimum Properties. But then i get a System.NullReferenceException.

Change size of Progress Bar

I have progress bar but dots too small, how I can make it bigger?
I didnt found any property witch can change size of dots. Height/Width change onlly area where dots can move
Xaml code
<Grid // here width ="2560" height="1600"
<ProgressBar
Grid.Row="0"
Grid.Column="1"
IsIndeterminate="True"
Visibility="{Binding MainInstance.Loading, Converter={StaticResource BooleanToVisibilityConverter}}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"/>
</Grid

There are several options to solve this, it's up to you which one you pick:
Change the default style of ProgressBar and increase the Ellipse Width and Height properties. You can do this in Blend or by copying the style from
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml
Use a ViewBox control to wrap around the ProgressBar. This control resizes all content to the available size.
Create a templated control with your own template settings properties.
I have created a small sample on GitHub to show you the code for all possibilities.

Easiest way to change ProgressBar's dots size is to use ScaleTransform:
<ProgressBar ...>
<ProgressBar.RenderTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</ProgressBar.RenderTransform>
</ProgressBar>

In my case (WinUI3 SDK1.1.0) I have had a thin 1px-line and it helped me to use the MinHeight property instead of the Height. I hope that MinHeight also will help you with the dotted line.
<StackPanel BorderThickness="0" BorderBrush="LightGray" Padding="12">
<muxc:ProgressBar
Value="{x:Bind Path=XamlProductionViewModel.XamlCurrentProgress, Mode=OneWay}"
IsIndeterminate="{x:Bind Path=XamlProductionViewModel.XamlIsIndeterminate, Mode=OneWay}"
Visibility="{x:Bind Path=XamlProductionViewModel.XamlProgressVisibility, Converter={StaticResource booleanToVisibilityConverter}, Mode=OneWay}"
Foreground="AliceBlue"
Background="Transparent"
Minimum="0"
Maximum="100"
BorderThickness="0"
Margin="0"
MinHeight="25"
Width="300"/>
</StackPanel>

ProgressRing not support any property to change the dots width and height ,and when the ProgressRing have a bigger space the dots will be biggest.
You can use the Grid which get a ProgressBar and the Grid is permanent position.
You use the Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" and you should write the code in Grid.You should give the Grid big space.
ProgressBar should use HorizontalAlignment="Stretch" and the same of VerticalAlignment.You have a big width and big height the dots will have a big width and big height.
<ProgressRing Margin="10,10,10,10"
IsActive="True"
Visibility="{x:Bind View.Visibility,Mode=OneWay}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
I write in the top Grid.You can see my app's ProgressRing have a big dots.
http://jycloud.9uads.com/web/GetObject.aspx?filekey=16bcfec973e910632e04b3990c274a1c

WPF DoubleUpDown command binding to up down buttons

<TextBox Text="{Binding Path=ScalingFactor, Mode=TwoWay, StringFormat=F5}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Width="150" behaviors:TextBoxBehavior.SelectAllTextOnFocus="True" behaviors:InputBindingsManager.SourceProperty="TextBox.Text"/>
<Button Command="{Binding MultiplyCommand}" Grid.Row="0" Grid.Column="1"
HorizontalAlignment="Center"
Margin="{StaticResource MarginItemLeft}">
<Image Source="/Themes;component/BaseTheme/Images/Add.png" Stretch="None" />
</Button>
<Button Command="{Binding DivideCommand}" Grid.Row="0" Grid.Column="2"
HorizontalAlignment="Center"
Margin="{StaticResource MarginItemLeft}">
<Image Source="/Themes;component/BaseTheme/Images/Minus.png" Stretch="None" />
</Button>
I have a text box with two commands,
Since this really looks like DoubleUpDown from WPF extended tools kit I thought of replacing all of this code with it.
However I can't find any documentation of how to bind the commands?
Can you help me connecting multiplyCommand into the up key and DivideCommand into the down key?

The best option is to wrap the xaml you presented in a user /custom control (depending on the level of customization you need to allow) and then add dependency properties for the Min, Max and Value (to allow binding when used).On the Execute method of the up and down commands simply validate the expected value against the min and max.

Is it possible to have same name on two components?

I am doing a project where I need a timer with drop shadow. I managed to figure out a way to do the drop shadow with 2 labels, but my problem now is that I need to give both the same name to act in the exact same way in all situation WITHOUT having duplicated code. Is this possible?
<Grid>
<Label x:Name="time" MouseDoubleClick="time_MouseDoubleClick" HorizontalAlignment="Center" FontFamily="Old English Text MT" Margin="0,5,0,0" FontSize="22" Content="00:00:00" FontWeight="Bold" Foreground="Black">
<Label.RenderTransform>
<TranslateTransform X="1.5" Y="1"/>
</Label.RenderTransform>
</Label>
<Label x:Name="time2" MouseDoubleClick="time_MouseDoubleClick" HorizontalAlignment="Center" FontFamily="Old English Text MT" Margin="0,5,0,0" FontSize="22" Content="00:00:00" FontWeight="Bold" Foreground="White"/>
</Grid>
This is how the code looks to make the drop shadow. Is there a way around this? Or is there a way like in HTML where I can define a "class" name?

You don't need two labels. You need DropShadowEffect:
<Label Content="00:00:00">
<Label.Effect>
<DropShadowEffect/>
</Label.Effect>
</Label>

It seems that you in actual fact need a drop-shaddow effect, another implementation to have two controls update based on the same property might lie in binding.
In the initialize method of the codebehind file set the DataContext.
DataContext = this;
Change your xaml to bind to a common string property.
<Grid>
<Label x:Name="time" MouseDoubleClick="time_MouseDoubleClick" HorizontalAlignment="Center" FontFamily="Old English Text MT" Margin="0,5,0,0" FontSize="22" Content="{Binding Time}" FontWeight="Bold" Foreground="Black">
<Label.RenderTransform>
<TranslateTransform X="1.5" Y="1"/>
</Label.RenderTransform>
</Label>
<Label x:Name="time2" MouseDoubleClick="time_MouseDoubleClick" HorizontalAlignment="Center" FontFamily="Old English Text MT" Margin="0,5,0,0" FontSize="22" Content="{Binding Time}" FontWeight="Bold" Foreground="White"/>
</Grid>
(The content property now includes binding)
Ensure that you have a property in the codebehind to support the binding
public string Time {get;set;}
Your code-behind (.cs file) should implement the INotifyPropertyChanged interface, and your property should Raise the Event.
Then by changing the Time property, the XAML will automatically update.

Scrollable textblock in windows phone 7

I am trying to create a scrollable text block.
But it dont seem to works.
How should i go about doing it?
Below is my code:
<Grid x:Name="ContentGrid" Grid.Row="1">
<ScrollViewer>
<TextBlock Height="517" HorizontalAlignment="Left" Margin="33,16,0,0" Name="textBlockRules" Text="" VerticalAlignment="Top" Width="414" FontSize="25" TextWrapping="Wrap" /></ScrollViewer>

Even though you didn't mention explicitly, I'm guessing that your aim is to show some large text without getting chopped.
For such a requirement there are helpful threads on stackoverflow:
1. Need to show large amount of text on windows phone 7 screen
2. Programmatically determining max fit in textbox (WP7)
On the other hand, if all you want is have text blocks in a sequence, you can use a ListBox that is databound to a list.

You have to set the maximum height of the ScrollViewer and could set the Visibility for the Scrollbars to Auto.
Here is the example from the msdn:
<ScrollViewer Height="200" Width="200" HorizontalScrollBarVisibility="Auto" Canvas.Top="60" Canvas.Left="340">
<TextBlock Width="300" TextWrapping="Wrap"
Text="I am the very model of a modern Major-General, I've information vegetable, animal, and mineral, I know the kings of England, and I quote the fights historical, From Marathon to Waterloo, in order categorical; I'm very well acquainted, too, with matters mathematical, I understand equations, both the simple and quadratical, About binomial theorem I'm teeming with a lot o' news, With many cheerful facts about the square of the hypotenuse." />
</ScrollViewer>

Set scrollviewerHorizontalBar to visibal, make textbok stretch and make sure your text is long enough, something like this:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Name="Scroller">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="100" Width="{Binding ElementName=Scroller, Path=ViewportWidth}"
TextWrapping="Wrap" Text="Some really long text that should probably wordwrap when you resize the window." />
</ScrollViewer>