Alignment Slider and TextBlock together inside ListView column - wpf

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"/>

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.

Wpf slider center tick value

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:

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">

retrieving the content properties from data template in wpf

I have a particular template for a listbox item which contains different textblocks. After adding the items in the listbox I want to retrieve the text of a particular textblock of a particular listbox item. How can I do that?
<ListBox x:Name="listBox1" Grid.Row="0" SelectionChanged="listBox1_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,2,0,0">
<CheckBox Name="cbSelect" VerticalAlignment="Center" Visibility="{Binding isVisible}"/>
<StackPanel Orientation="Vertical">
<Grid HorizontalAlignment="Stretch" >
<TextBlock Name="txtTitle" VerticalAlignment="Bottom" Text="{Binding Title}" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Name="txtDate" Foreground="{StaticResource PhoneInverseInactiveBrush}" HorizontalAlignment="Right" VerticalAlignment="Center" Text="{Binding CreatedOn}" Margin="0,0,30,0" Style="{StaticResource PhoneTextSmallStyle}" />
<!-- <Image x:Name="lineImg" Source="/Icons/appbar.next.rest.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="48" Height="48"/>-->
</Grid>
<TextBlock Name="txtContent" Foreground="{StaticResource PhoneDisabledBrush}" VerticalAlignment="Bottom" Text="{Binding Content}" Style="{StaticResource PhoneTextNormalStyle}" />
<Line Stroke="{StaticResource PhoneBorderBrush}" StrokeThickness=" 2" X1="0" Y1="0" X2="{Binding ElementName=listBox1, Path=ActualWidth}" Y2="0" Margin="0,6,0,0" ></Line>
<!-- <Image x:Name="lineImg" Source="/Icons/Line.png" HorizontalAlignment="Center" Width="500" Height="2" Margin="0,15,0,0" />-->
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In the above code, after adding the items to the listbox, I want the text of txtTitle of a particular item. How can I get it?
You need to get a reference to the ContentPresenter of the item.
ListBoxItem myListBoxItem = (ListBoxItem)(myListBox.ItemContainerGenerator.ContainerFromItem(myListBox.Items.CurrentItem));
ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(myListBoxItem);
DataTemplate myDataTemplate = myContentPresenter.ContentTemplate;
TextBlock myTextBlock = (TextBlock)myDataTemplate.FindName("textBlock", myContentPresenter);
The FindVisualChild method along with the full example can be found here.

Resources