textblock in user control TextWrapping not wrapping - wpf

I created user control with the textblock. But it will not wrap. This user control servers as a listboxitem.
<Grid x:Name="MainGrid" Height="Auto" Width="Auto">
<StackPanel Orientation="Horizontal">
<Image Height="50" Width="100" Stretch="Uniform" Name="image1" Source="{Binding Path=VideoImageUrl}" Margin="12,12,13,84" MouseLeftButtonDown="image1_MouseLeftButtonDown" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" />
<StackPanel Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Height="Auto" HorizontalAlignment="Left" Name="titleTextBox"
Text="{Binding Path=Title, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" FontSize="14" FontWeight="SemiBold" />
<StackPanel Orientation="Vertical" x:Name="StackPanelDetails">
<TextBlock Height="Auto" HorizontalAlignment="Left" Name="desciptionTextBox"
TextWrapping="Wrap"
Text="{Binding Path=Desciption, Mode=OneWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" />
<Line />
<ItemsControl x:Name="CustomItemsSource" ItemsSource="{Binding Path=LinksList}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink NavigateUri="{Binding Path=TopicUrl}" RequestNavigate="Hyperlink_RequestNavigate" >
<TextBlock Text="{Binding Path=TopicName}" />
</Hyperlink>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>

A ListBox's default template does not automatically limit the width of its items, but instead uses a ScrollViewer, which shows a horizontal scrollbar when an item is wider than the ListBox.
You can remove the ScrollViewer by replacing the ListBox's Template:
<ListBox ...>
<ListBox.Template>
<ControlTemplate>
<StackPanel IsItemsHost="True"/>
</ControlTemplate>
</ListBox.Template>
...
</ListBox>
Another important thing to note is that a StackPanel in the top-level Grid won't properly resize the contained elements. In the following simplified example the text in the TextBlock is not wrapped because the containing StackPanel simply does not resize it as you expect:
<Grid>
<StackPanel Orientation="Horizontal">
<Image ... />
<Text TextWrapping="Wrap" Text=... />
</StackPanel>
</Grid>
This way it works as you expect:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image ... />
<TextBlock Grid.Column="1" TextWrapping="Wrap" Text=... />
</Grid>

Related

How to use Binding in trigger, to change another control in WPF?

I have this DataTemplate in style. I have two properties for Image's Source (Image and ImageHover). Now its Image. So I want to change it to ImageHover when the List item from the List Box is hovered by the mouse. How can I make this kind of Binding - Binding in trigger, to change another control's property ?
<DataTemplate x:Key="MetroListBoxItemTemplate">
<Grid Name="grid_menu">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="110"/>
</Grid.ColumnDefinitions>
<Image Name="menu_image" Source="{Binding Image}" Stretch="Uniform" Width="40" Height="40" >
</Image>
<StackPanel Grid.Column="1" Margin="5">
<TextBlock Text="{Binding Path=Title, FallbackValue=Title}" FontFamily="Segoe UI Light" FontSize="20"
Foreground="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=Foreground}" />
</StackPanel>
</Grid>
</DataTemplate>
I use the template here
<ListBox
x:Name="main_menu" HorizontalAlignment="Left" Margin="8,8,0,8" Width="160"
ItemTemplate="{DynamicResource MetroListBoxItemTemplate}"
ItemContainerStyle="{DynamicResource MetroListBoxItemStyle}"
ItemsSource="{Binding Menu}">
</ListBox>

WPF Scrollviewer Can't scroll horizontally

I can't find a way to make these images in a scrollviewer horizontally.
They're like this
IMAGE1
IMAGE2
IMAGE3
I want
IMAGE1 IMAGE2 IMAGE3
So I can scroll them horizontally. I've already tried google and stackoverflow and I can't find a working solution :(
Code
<Window x:Class="TESSTTTTTT.MirrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MirrorWindow" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="None">
<Grid Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Name="ColumnKinect">
<Image Name="camera2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--
<Canvas Name="canvas2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />-->
<Image Name="imgBodyFrame" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200"/>
<!--Stretch="UniformToFill"-->
<Image Name="img3DBodyRotation" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="1" Height="1800" Width="3200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="ColumnCatalogo">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewerCatalogo" Background="AliceBlue"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible">
<ItemsControl Grid.Row="0" Name="itemsControl" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<ItemsControl Name="itcCatalogo" HorizontalContentAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox Width="Auto" Height="Auto" HorizontalContentAlignment="Left">
<WrapPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<StackPanel Name="stpProduct" Orientation="Vertical">
<TextBlock Width="Auto" Height="Auto" Text="{Binding Nome}" Foreground="#006b66" FontFamily="Verdana" FontSize="14" FontWeight="ExtraBold"/>
<Image Width="400" Height="300" Source="{Binding PathImmagine}"/>
<TextBlock Width="Auto" Height="Auto" Foreground="#006b66" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
<Run Text="Prezzo a partire da: "/>
<LineBreak/>
<Run Text="{Binding Prezzo}"/>
<Run Text="€"/>
</TextBlock>
<TextBlock Width="Auto" Height="Auto" Text="{Binding Rigidita}" Foreground="Gray" FontFamily="Verdana" FontSize="20" FontWeight="ExtraBold"/>
</StackPanel>
</WrapPanel>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>
I am not sure you are speaking about images, Image1 Image2 Image3. You would have mentioned them in the given code snippet. As I am not sure about the ques, I have added 2 scenarios.
Scenario 1: I could see 3 Image control in the 0th Column. If you need them to be shown horizontally, you could use StackPanel instead of Grid, and can use the Orientation property as Horizontal. or you need to add 3 columns to the 0th Column Grid, and you can add those images respectively.
Scenario 2: and in the 1st Grid, you have a scrollviewer, if you need the image controls to be visible horizontally inside those, the same you could use the Orientation property of StackPanel (stackpanel inside the wrappanel) to Horizontal instead of Vertical.
Hope this helps you.
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<StackPanel Orientation="Horizontal">
<Button Content="Button1" Foreground="Red" />
<Button Content="Button2" Foreground="Red" />
<Button Content="Button3" Foreground="Red" />
<Button Content="Button4" Foreground="Red" />
<Button Content="Button5" Foreground="Red" />
<Button Content="Button6" Foreground="Red" />
</StackPanel>
</ScrollViewer>
Try this way, adding a custom panel template to your listbox that is horizontal.
<Window x:Class="TESSTTTTTT.MirrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MirrorWindow" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="None">
<Grid Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Name="ColumnKinect">
<Image Name="camera2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--
<Canvas Name="canvas2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />-->
<Image Name="imgBodyFrame" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200"/>
<!--Stretch="UniformToFill"-->
<Image Name="img3DBodyRotation" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="1" Height="1800" Width="3200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="ColumnCatalogo">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewerCatalogo" Background="AliceBlue"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible">
<ItemsControl Grid.Row="0" Name="itemsControl" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<ItemsControl Name="itcCatalogo" HorizontalContentAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox Width="Auto" Height="Auto" HorizontalContentAlignment="Left">
<WrapPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<StackPanel Name="stpProduct" Orientation="Vertical">
<TextBlock Width="Auto" Height="Auto" Text="{Binding Nome}" Foreground="#006b66" FontFamily="Verdana" FontSize="14" FontWeight="ExtraBold"/>
<Image Width="400" Height="300" Source="{Binding PathImmagine}"/>
<TextBlock Width="Auto" Height="Auto" Foreground="#006b66" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
<Run Text="Prezzo a partire da: "/>
<LineBreak/>
<Run Text="{Binding Prezzo}"/>
<Run Text="€"/>
</TextBlock>
<TextBlock Width="Auto" Height="Auto" Text="{Binding Rigidita}" Foreground="Gray" FontFamily="Verdana" FontSize="20" FontWeight="ExtraBold"/>
</StackPanel>
</WrapPanel>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>

Display two textBlock on a dataGrid

Is there possibility to display two TextBlock on a Grid ?
I tried, but i see only my first TextBlock.
Here is my XAML code :
<ListBox x:Name="ListBoxTiers" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#FFDEDEDE" CornerRadius="10" Margin="10">
<StackPanel Orientation="Horizontal">
<Grid Height="89" Width="975">
<TextBlock x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="{Binding m_strCode}" Margin="12,23,479,30" />
<TextBlock x:Name="TxtBox_NomTiers" Margin="501,23,14,24" TextWrapping="Wrap" Text="{Binding m_strNom}"/>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks a lot :)
Grid is the best UI container which supports orientation. You can modify your code in the below way.
<ListBox x:Name="ListBoxTiers" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#FFDEDEDE" CornerRadius="10" Margin="10">
<Grid Height="89" Width="975">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="TxtBox_CodeTiers" Grid.Column=0 TextWrapping="Wrap" Text="{Binding m_strCode}" />
<TextBlock x:Name="TxtBox_NomTiers" Grid.Column=1 TextWrapping="Wrap" Text="{Binding m_strNom}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You should have to adjust the column column width as per your requirement.
Both of your texts are drawn at the same location.
You can either add Grid columns/Raws or remove the grid completly and stay with the stackPanel
You should go over Panels Overview

Button alignment problem in listbox in WPF

I have a listbox containing itemtemplate like this
<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding [0]}" FontWeight="Bold" />
<TextBlock Text="{Binding [1]}"></TextBlock>
<StackPanel.ToolTip>
<ToolTip>asdf</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
</Grid>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Right" DockPanel.Dock="Right">
<Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1" HorizontalAlignment="Right"></Button>
</StackPanel>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This listbox is in first column of a grid which has a splitter.
Now problem is that I am not able to align the button to right side of listbox item.
One Grid is enough here. You only need one star-sized column (for content) and one Auto-sized column (for the button):
<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate >
<Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding [0]}" FontWeight="Bold"/>
<TextBlock Text="{Binding [1]}" ></TextBlock>
<StackPanel.ToolTip>
<ToolTip>asdf</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right">
<Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1"></Button>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

WPF ListView with column names?

I have this ListView and I'm using a DataTemplate (as you can see) for items.
How can i add column names to the ListView with this ItemTemplate definition?
I cannot use that GridViewColumn definition, because this ListView uses lazy data loading, so when there are too many rows, it fetches them on demand. GridViewColumn somehow does not function with this lazy loading.
<ListView Grid.Row="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" Background="Transparent" MinWidth="580" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" Grid.Column="0" Text="{Binding Path=Benutzer.Value.Code}"/>
<TextBlock VerticalAlignment="Center" Grid.Column="1" Text="{Binding Path=Nachname}"/>
<TextBlock VerticalAlignment="Center" Grid.Column="2" Text="{Binding Path=Vorname}"/>
<TextBlock VerticalAlignment="Center" Grid.Column="3">
<TextBlock.Text>
<Binding Path="GeburtDate" StringFormat="{}{0:d}"/>
</TextBlock.Text>
</TextBlock>
<Button VerticalAlignment="Center" Grid.Column="4" Style="{StaticResource StyleEditButton}" Content="Öffnen..." Tag="{Binding}" Click="OpenPersonButton_Click"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
I don't think there is any point in using a ListView if, as you say, you cannot use GridView (or any other view). I would exchange ListView for ItemsControl (or ListBox if you need a selectable item or any of the other things that ListBox offers).
If what you say is true, you could just use a stack panel to position a header row above your data rows:
<StackPanel>
<!-- Header -->
<StackPanel Orientation="Horizontal">
<TextBlock Width="220" TextAlignment="Center" Text="Code" />
<TextBlock Width="100" TextAlignment="Center" Text="Nachname" />
<TextBlock Width="100" TextAlignment="Center" Text="Vorname" />
<TextBlock Width="70" TextAlignment="Center" Text="GeburtDate" />
</StackPanel>
<!-- Data rows -->
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" MinWidth="580">
<TextBlock Width="220" TextAlignment="Center" Text="{Binding Path=Benutzer.Value.Code}" />
<TextBlock Width="100" TextAlignment="Center" Text="{Binding Path=Nachname}" />
<TextBlock Width="100" TextAlignment="Center" Text="{Binding Path=Vorname}" />
<TextBlock Width="70" TextAlignment="Center" Text="{Binding Path=GeburtDate, StringFormat={0:d}}" />
<Button VerticalAlignment="Center" Grid.Column="4" Style="{StaticResource StyleEditButton}" Content="Öffnen..." Tag="{Binding}" Click="OpenPersonButton_Click"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Hope that helps. You might also like to read about virtualizing panels. That might provide the kind of laziness you're talking about.

Resources