Wpf slider center tick value - wpf

I have a slider which has a min value of -127 and a max value of 127. On startup the slider is positioned in the middle, so at value 0.
Is it possible to have the text 0 to be shown at the tick, so you can visibly see where the center is?
<Slider Margin="3"
Minimum="-127"
Maximum="127"
TickPlacement="BottomRight"
TickFrequency="2"
IsSnapToTickEnabled="True"
SmallChange="1" />
Here is a picture of my slider.

I don't think there is a way with the slider alone, I'd try:
<StackPanel HorizontalAlignment="Center">
<Slider Grid.Row="2" Margin="3" Width="150"
Minimum="-127"
Maximum="127"
TickPlacement="BottomRight"
TickFrequency="2"
IsSnapToTickEnabled="True"
SmallChange="1" />
<TextBlock Text="0" HorizontalAlignment="Center" Margin="0,-5,0,0"/>
</StackPanel>
EDIT: I just realized you are not new to this, so you must have thought of this trivial solution ...

This is how I got what I wanted. I used a DockPanel under the Slider to layout the TextBlocks.
One for the center 0, one on the right side to set the max value and another one on the left side to set the min value.
I couldn't find any other solution that did what I wanted. If there is, post it here :)
XAML:
<StackPanel Orientation="Vertical">
<Slider x:Name="SpeedSlider"
Margin="3"
Foreground="DarkGray"
Value="{Binding SliderValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Maximum="{Binding Steps,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Minimum="{Binding MinSteps,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
SmallChange="2"
TickFrequency="4"
TickPlacement="BottomRight"
ToolTip="{Binding ElementName=SpeedSlider,Path=Value}">
</Slider>
<DockPanel>
<TextBox DockPanel.Dock="Left"
Text="{Binding MinSteps,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Width="100"
Background="Transparent"
IsReadOnly="True"
BorderThickness="0" />
<TextBox DockPanel.Dock="Right"
Text="{Binding Steps,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Width="100"
HorizontalContentAlignment="Right"
Background="Transparent"
IsReadOnly="True"
BorderThickness="0" />
<TextBlock DockPanel.Dock="Right"
Text="0"
HorizontalAlignment="Center" />
</DockPanel>
</StackPanel>
Image:

Related

How to know the height of a wrapped textbox?

I need to know the height of a wrapped textBox. I am using this code:
MyView myView = new MyView();
myView.MyTextBox.Text = "my large text";
myView.UpdateLayout();
double myHeight = myView.MyTextBox.Actualheight;
No matter how large is the text, I always get 12.96 as actualheight.
If I do the same with a datagrid in which I am add new items, I am getting the right height, so I am wondering if sometimes a wrapped textbox has another behavior.
Thanks.
EDIT: i have realized that the size depends of the size of the font. At first I setted 8, but if I set 16, the actual height is the double too. So it seems that the height of the textBox depends of the font size, and it has not account if it is wrapped or not.
Running a simple test in XAML, when the text wraps, it causes the textbox ActualHeight to increase as expected as shown in the image below.
<StackPanel Orientation="Horizontal">
<TextBox Width="100" HorizontalAlignment="Left" Margin="10"
FontSize="10" Name="tbx1"
TextWrapping="Wrap" Text="Some short text"/>
<TextBlock Foreground="White" VerticalAlignment="Center"
FontSize="20"
Text="{Binding ActualHeight, ElementName=tbx1, Mode=OneWay}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox Width="100" HorizontalAlignment="Left" Margin="10"
FontSize="10" Name="tbx2"
TextWrapping="Wrap" Text="Some text that is longer"/>
<TextBlock Foreground="White" VerticalAlignment="Center"
FontSize="20"
Text="{Binding ActualHeight, ElementName=tbx2, Mode=OneWay}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox Width="100" HorizontalAlignment="Left" Margin="10"
FontSize="15" Name="tbx3"
TextWrapping="Wrap" Text="Short text"/>
<TextBlock Foreground="White" VerticalAlignment="Center"
FontSize="20"
Text="{Binding ActualHeight, ElementName=tbx3, Mode=OneWay}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox Width="100" HorizontalAlignment="Left" Margin="10"
FontSize="15" Name="tbx4"
TextWrapping="Wrap" Text="Some text that is longer"/>
<TextBlock Foreground="White" VerticalAlignment="Center"
FontSize="20"
Text="{Binding ActualHeight, ElementName=tbx4, Mode=OneWay}" />
</StackPanel>
UpdateLayout doesn't actually cause anything to be rendered, it just prepares it. So until you render your view or window with myView.Show() or something equivalent, the textbox doesn't get rendered so the ActualHeight value doesn't get calculated.

Alignment Slider and TextBlock together inside ListView column

I have ListView and i inserted Slider and TextBlock in the same column:
<DataTemplate x:Key="MyDataTemplate2">
<Grid Margin="-7" >
<Slider Name="sliderColumn"
HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource SliderStyle}" Width="80"/>
<TextBlock Text="{Binding Path=Value, ElementName=sliderColumn, StringFormat={}{0}}" FontSize="11" Foreground="White"
VerticalAlignment="Center" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
And this is the result:
Bu when the Slider value changed it become unreadable:
Any suggestions how to fix it and make sure to display only integer numbers ?
Change your slider Like this by ading these two properties in slider TickFrequency and IsSnapToTickEnabled
<Slider Name="sliderColumn"
HorizontalAlignment="Left" VerticalAlignment="Center" Width="80" TickFrequency="1" IsSnapToTickEnabled="True"/>

Put TextBlock on top of another TextBlock

I tried to implement case in which one TextBlock appears on top of another TextBlock, playing with Visibility property - but it doesn't working yet.
TextBlock are inside DockPanel:
<DockPanel Grid.Row="1" Margin="5">
<TextBlock Text="Text1" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right">
<TextBlock Text="Text2" Background="Aqua" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{Binding IfDeviceSelected, NotifyOnSourceUpdated=True, Converter={StaticResource ResourceKey=BoolToVisibilityConverter}}" />
</TextBlock>
<TextBlock Text="#Device Focus:" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right" />
</DockPanel>
You will want to use a Grid to group these TextBlocks, DockPanel/StackPanel will not allow overlapping controls(without horrible manipulation of Margins etc)
<DockPanel Grid.Row="1" Margin="5" >
<Grid DockPanel.Dock="Right" >
<TextBlock Text="Text1" />
<TextBlock Text="Text2" Background="Aqua" Visibility="{Binding IfDeviceSelected, NotifyOnSourceUpdated=True, Converter={StaticResource ResourceKey=BoolToVisibilityConverter}}" />
</Grid>
<TextBlock Text="#Device Focus:" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right" />
</DockPanel>

Listbox showing second item first

I am currently sitting on a Silverlight-Listbox and have some
trouble getting my listBox right.
Its (visually) starts from the second item.
I have to scroll up to see the first one.
Why is this happening and how could I fix this?
<ListBox x:Name="ServingsList"
Foreground="White"
Background="#FFB88A8A"
SelectionChanged="servingSelected"
Margin="0,0,0,297">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="70" Width="432">
<Rectangle x:Name="Linie"
Fill="#FF8D8D8D"
HorizontalAlignment="Right"
Height="2"
StrokeThickness="0"
VerticalAlignment="Top"
Width="380"
Margin="0,-30,0,0" />
<TextBlock x:Name="ServingTitel"
TextWrapping="Wrap"
Text="{Binding name}"
FontSize="21.333"
Margin="50,-60,0,0" />
<Image x:Name="Ribbon"
HorizontalAlignment="Right"
Height="30"
VerticalAlignment="Top"
Width="151"
Source="/TEX/GrayRibbon.png"
Stretch="UniformToFill"
Margin="0,-60,0,0" />
<TextBlock x:Name="Kcal"
TextWrapping="Wrap"
Text="{Binding kalorien]}"
FontSize="18.667"
Height="23"
Margin="0,-92,8,0"
TextAlignment="Right" />
<Button Content="1"
Width="55" Height="55"
BorderThickness="3"
FontSize="18.667"
Padding="-1,-2,0,0"
Margin="-400,-87,0,0"
FontWeight="Bold"
Click="servingButtonClicked" />
</StackPanel>
</DataTemplate>
</ListBox>
You need to check your Margin values - in the main list you're putting 297 pixels of whitespace below your list box. Other elements have weird values too. Expression Blend sometimes messes with the Margins if you change from a StackPanel to a Grid.
e.g:
Margin="0,0,0,297">

Can I use a DataTemplate for toolbar buttons and still make the name meaningful?

I have a Toolbar whose ItemSource is a collection of toolbarItems which contain the bitmap text and other info for the button and the xaml includes a DataTemplate to bind the data to the button.
Our app now needs to become 508 compliant and when I run the Accessible Event Watcher it is listing all the toolbar button names as "Unknown".
Can someone tell me how to provide a meaningful name to the buttons?
Here's the portion of xaml applying to this issue:
<ToolBar.ItemTemplate>
<DataTemplate DataType="{x:Type src:toolBarItem}">
<DataTemplate.Resources>
<src:toolBarItemConverter x:Key="buttonConverter" />
<src:booleanToVisibilityConverter x:Key="boolToVisibilityConverter" />
<src:toolBarButtonFormatConverter x:Key="toolBarFormatDisplayConverter" />
<src:stringToVisibilityConverter x:Key="stringToVisibilityDisplayConverter" />
</DataTemplate.Resources>
<StackPanel Orientation="Horizontal">
<Border Style="{StaticResource SeparatorStyle}" Visibility="{Binding menuSeparator, Converter={StaticResource boolToVisibilityConverter}}"/>
<Button x:Name="listButton" Height="{Binding menuHeight, Mode=OneWay}" Width="{Binding menuWidth}" VerticalAlignment="Top" HorizontalAlignment="Center" Visibility="{Binding isActiveButton, Converter={StaticResource boolToVisibilityConverter}}" Tag="{Binding}"
ToolTip="{Binding menuTooltip}" IsEnabled="{Binding isEnabled}" >
<UniformGrid VerticalAlignment="Center" HorizontalAlignment="Center" Rows="{Binding menuText,Converter={StaticResource toolBarFormatDisplayConverter}}" >
<!-- button image -->
<Image Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding menuImage, Converter={StaticResource buttonConverter}}"/>
<!-- button name -->
<Viewbox StretchDirection="DownOnly" HorizontalAlignment="Center" VerticalAlignment="Bottom" Visibility="{Binding menuText, Converter={StaticResource stringToVisibilityDisplayConverter}}" >
<TextBlock x:Name="buttonName" FontFamily="Segoe UI" Width="{Binding menuWidth}" FontSize="12" Grid.Row="1" TextAlignment="Center" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="{Binding menuText}" Foreground="Black" />
</Viewbox>
</UniformGrid>
<!-- </StackPanel> -->
</Button>
</StackPanel>
</DataTemplate>
</ToolBar.ItemTemplate>
Thanks,
Ron
OK we figured this out. Need to simply bind your names to the AutomationProperties.Name
<Button x:Name="listButton" AutomationProperties.Name="{Binding menuText}"
Height="{Binding menuHeight, Mode=OneWay}" Width="{Binding menuWidth}"
VerticalAlignment="Top" HorizontalAlignment="Center"
Visibility="{Binding isActiveButton,
Converter={StaticResource boolToVisibilityConverter}}"
Tag="{Binding}" ToolTip="{Binding menuTooltip}" IsEnabled="{Binding isEnabled}" >

Resources