The obvious MaxWidth gets ignored and the text in the "DisplayBox" TextBlock displays the whole text even if this text continues past the parent container controls (to the edge of the silverlight area.
<win:HierarchicalDataTemplate x:Key="hierarchicalTemplate" ItemsSource="{Binding _children}">
<Border BorderThickness="0" BorderBrush="Orange" HorizontalAlignment="Stretch" Background="{Binding Converter={StaticResource BackgroundConverter}}">
<toolkit:DockPanel LastChildFill="True" Width="{Binding HeirarchyLevel, Converter={StaticResource WidthConverter}}" Height="20">
<Canvas toolkit:DockPanel.Dock="Right" Width="20" MouseLeftButtonUp="Arrow_MouseLeftButtonDown">
<Rectangle Width="20" Height="20" Fill="Transparent" />
<Line Stroke="Black" X1="5" Y1="10" X2="17" Y2="10" />
<Line Stroke="Black" X1="11" Y1="5" X2="17" Y2="10" />
<Line Stroke="Black" X1="11" Y1="15" X2="17" Y2="10" />
</Canvas>
<Ellipse Canvas.Top="5" Width="10" Height="10" Fill="Green" toolkit:DockPanel.Dock="Right" MouseLeftButtonDown="Ellipse_MouseLeftButtonDown" />
<Canvas Width="Auto" Loaded="TextArea_Loaded">
<TextBlock Name="DisplayBox" FontFamily="Arial" FontSize="17" Foreground="Black" Width="Auto" Text="{Binding TaskName}" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp" />
<TextBox Name="EditBox" FontFamily="Arial" FontSize="10" Foreground="Black" Height="20" Text="{Binding TaskName}" Visibility="Collapsed" LostFocus="TextBox_LostFocus" />
<Line Stroke="Black" X1="0" Y1="10" X2="202" Y2="10" Width="Auto" />
</Canvas>
</toolkit:DockPanel>
</Border>
</win:HierarchicalDataTemplate>
Can you switch to using a Grid instead of a canvas? A TextBlock will be appropriately clipped when it is a child of a Grid. This is not true of Canvas.
<Canvas Width="Auto" Loaded="TextArea_Loaded">
**<Border>**
<TextBlock Name="DisplayBox" FontFamily="Arial" FontSize="17" Foreground="Black" Width="Auto" Text="{Binding TaskName}" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp" />
<TextBox Name="EditBox" FontFamily="Arial" FontSize="10" Foreground="Black" Height="20" Text="{Binding TaskName}" Visibility="Collapsed" LostFocus="TextBox_LostFocus" />
<Line Stroke="Black" X1="0" Y1="10" X2="202" Y2="10" Width="Auto" />
**</Border>**
</Canvas>
Should also work. (Border will honor label's maxlength. and border itself will not be visible since its thickness is 0.
Related
I use LibVLCSharp.WPF in a WPF application.
I want to put some icons and buttons above the video.
But after the VideoView control has loaded, it overwrite everything.
<Canvas Width="325" Height="182">
<Image Source="/Resource/BgLoading_1.png"
Width="325"
Height="182"
Stretch="Fill"
StretchDirection="Both"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Panel.ZIndex="0"
Visibility="Visible" />
<fa:ImageAwesome Foreground="White"
Icon="Spinner"
Spin="True"
Height="48"
Width="48"
Visibility="{Binding LoadImageStatus}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.Left="139"
Canvas.Top="67" />
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
<Image x:Name="imgRightIcon"
Width="30"
Height="30"
Source="{Binding RightIconSource}"
Stretch="Fill"
Margin="285,10,10,142"
Visibility="{Binding RightIconStatus}"
Panel.ZIndex="2" />
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Canvas>
RTFM
The controls that must appear on top of the video should be placed as children of the VideoView element.
<Window ...
xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
...>
<Grid>
<vlc:VideoView x:Name="VideoView">
<Button x:Name="PlayButton"
Click="PlayButtonOnClick"
Content="Play"
Margin="8"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</vlc:VideoView>
</Grid>
</Window>
Avoid Canvas since they are pretty dumb.
Working example sources based on the manual.
I haven't used vlc, if it covers the icons, I think it should be a window drawn with a separate handle. just like WindowsFormHost. try use Popup control, it can be displayed on top of any control.
<Grid>
<!--video control-->
<Grid Name="video">
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Grid>
<Popup PlacementTarget="{Binding ElementName=video}" Placement="Center">
<Grid>
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
</Grid>
</Popup>
</Grid>
I have a listbox in WPF which consists of few labels and a rectangle.
I am trying to get all the label values of items in a ListBox.
My WPF markup for ListBox is:
<ListBox x:Name="izabraniList" ItemTemplate="{DynamicResource izabraniIzbornik}" Margin="0,80,10,108" HorizontalAlignment="Right" Width="289" Background="{x:Null}" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListBox.Resources>
<DataTemplate x:Key="izabraniIzbornik">
<Border BorderBrush="white" CornerRadius="2,2,2,2" BorderThickness="1,1,1,1">
<StackPanel Orientation="Horizontal" Width="254" Height="64" UseLayoutRounding="False" Opacity="100">
<DockPanel>
<Rectangle Height="62" Width="62"
Margin="2,0" RadiusX="5" RadiusY="5" >
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=ART_SIFRA, Converter={StaticResource ImageSourceConverter}}"/>
</Rectangle.Fill>
</Rectangle>
</DockPanel>
<DockPanel Width="133" >
<Label Content="{Binding ART_NAZIV}"
VerticalAlignment="Center"
HorizontalAlignment="left"
FontSize="12" Width="auto" Foreground="#FF303030" FontWeight="Bold" />
</DockPanel>
<DockPanel HorizontalAlignment="right" Width="55" Height="64">
<DockPanel HorizontalAlignment="Right" VerticalAlignment="top" Height="20" FlowDirection="RightToLeft"/>
<DockPanel HorizontalAlignment="Right" VerticalAlignment="bottom" Height="64" FlowDirection="RightToLeft" Width="55">
<Label x:Name="cijena" Content="{Binding SKC_PRICE}" FontSize="11" DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Width="55" />
<Label Content="{Binding kolicina}" FontSize="11" DockPanel.Dock="Right" HorizontalAlignment="left" VerticalAlignment="top" FontWeight="Bold" Width="55" />
</DockPanel>
</DockPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.Resources>
</ListBox>
And I would like to do something like this:
For Each i As String In izabraniList.Items("SKC_PRICE")
Console.WriteLine(i)
Next
make a separate property in your class that flattens the list (i.e.
public string property { get { return String.Join(", ", izabranilist.Select(x => x.Skc_Price).toarray()); } }
and then bind that to the label.
I have a text block I want to vertically align so it appears in the center of a circle. It's a single character, such as 'a', 'y', '?', 'R' or any other valid character. It could have a descender, ascender, be a capital, non alphabetical etc.
With the following code, it appears to align the text block according to the height of a capital letter. So a lower case letter appears too low, and letter with a descender even more so.
<Grid Width="32" Background="Green" Height="32">
<Ellipse Width="32" Height="32" Stroke="Red" Fill="White"/>
<TextBlock Text="{Binding Character}" Foreground="Blue" HorizontalAlignment="Center" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Arial" FontSize="28"/>
</Grid>
Is there a way to get to align vertically based on the text content of the TextBlock, instead of the reserved area of the text that might be in it?
If it is not possible, what other controls / methods are available in WPF to achieve this?
Landerah in you code only if i set magin for textblock, than i can set text where i want. You can also set margin dynamically i.e If character is lower case set magin bit above like test.Margin = new Thickness(0, -2, 0, 0);
<Grid Width="32" Background="Green">
<Ellipse Width="32" Height="32" Stroke="Red" Fill="White"/>
<TextBlock Margin="0,-2,0,0" Text="r" Foreground="Blue" HorizontalAlignment="Center" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Arial" FontSize="28"/>
</Grid>
A more complete sample that works for me -
<ControlTemplate TargetType="{x:Type local:LevelControl}">
<Viewbox x:Name="Frame">
<Grid Margin="2" Background="Transparent" VerticalAlignment="Center" HorizontalAlignment="Center" Width="26" Height="26">
<Ellipse x:Name="outerEllipse" Fill="{Binding Fill, ElementName=innerEllipse}" Stretch="UniformToFill" Grid.Row="0" Opacity="0.5" />
<Ellipse x:Name="innerEllipse" Fill="Gray" Stretch="UniformToFill" Margin="4" Grid.Row="0" />
<TextBlock x:Name="Label" FontWeight="Bold" FontSize="18" Foreground="White" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="7.948,0,7.698,2.125" />
</Grid>
</Viewbox>
</ControlTemplate>
or try a label <Label VerticalAlignment="Center" VerticalContentAlignment="Center" ></Label>
I am new with WPF please keep that in mind. I am trying to Make the Window Responsive to Resize, Is it possible that my controls such as textboxes and buttons are Resized as window grows or shrinks?
<Window x:Class="WPF_Working_Experimenet.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="216.586" Width="459.256">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="156*"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Label Content="username :" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="66,27,0,0" Height="30" Width="63" FontFamily="B Nazanin" FontSize="15" Grid.Column="1"/>
<Label Content="password :" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="74,63,0,0" Height="30" Width="55" FontFamily="B Nazanin" FontSize="15" Grid.Column="1"/>
<Label x:Name="lblwrong" Content="" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,150,0,0" ClipToBounds="True" Grid.Column="1" Height="26" Width="275"/>
<Button x:Name="btnLogin" Content="Login" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60" Grid.Column="1" Margin="211,103,0,0" Height="37" Background="White" Click="btnLogin_Click" BorderBrush="Red" FontFamily="B Nazanin" FontSize="15"/>
<Image HorizontalAlignment="Left" Height="117" Margin="4,23,0,0" VerticalAlignment="Top" Width="178" Source="img/Ticket_5523675581838074942.png" Grid.ColumnSpan="2" RenderTransformOrigin="0.5,0.128"/>
<Button x:Name="btnExit" Content="Exit" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60" Grid.Column="1" Margin="146,103,0,0" Height="37" Background="#FFFDFDFD" BorderBrush="Red" Click="Button_btnExit" FontFamily="B Nazanin" FontSize="15"/>
<TextBox x:Name="txtUsername" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="125" Grid.Column="1" Margin="146,34,0,0" BorderBrush="#FFF7311E"/>
<PasswordBox x:Name="txtPassword" Grid.Column="1" HorizontalAlignment="Left" Margin="146,70,0,0" VerticalAlignment="Top" Width="125" Height="23" BorderBrush="#FFFD3306"/>
</Grid>
</Window>
Any Reference/hint or Tutorial/link would be lovely. thank you in advance
You have to set Margin / Padding instead of explicit Width / Height if you want your controls to grow / shrink.
Few links to help you :
Layout with Absolute and Dynamic Positioning
How to make all controls resize accordingly proportionally when window is maximized?
Controls do not resize if you set their Width and Height properties explicitly. Try the following, I removed the Width and Height properties and changed the HorizontalAlignment and VerticalAlignment values to Stretch.
<Window x:Class="WPF_Working_Experimenet.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="216.586" Width="459.256">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="156*"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Label Content="username :"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontFamily="B Nazanin"
FontSize="15"
Grid.Column="1"/>
<Label Content="password :"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontFamily="B Nazanin"
FontSize="15"
rid.Column="1"/>
<Label x:Name="lblwrong"
Content=""
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="True"
Grid.Column="1"/>
<Button x:Name="btnLogin"
Content="Login"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Background="White"
Click="btnLogin_Click"
BorderBrush="Red"
FontFamily="B Nazanin"
FontSize="15"/>
<Image HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Source="img/Ticket_5523675581838074942.png"
Grid.ColumnSpan="2"
RenderTransformOrigin="0.5,0.128"/>
<Button x:Name="btnExit"
Content="Exit"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Background="#FFFDFDFD"
BorderBrush="Red"
Click="Button_btnExit"
FontFamily="B Nazanin"
FontSize="15"/>
<TextBox x:Name="txtUsername"
HorizontalAlignment="Stretch"
TextWrapping="Wrap"
VerticalAlignment="Stretch"
Grid.Column="1"
BorderBrush="#FFF7311E"/>
<PasswordBox x:Name="txtPassword"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="#FFFD3306"/>
</Grid>
</Window>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="View/Images/LoginImg.jpg" Stretch="Fill" Grid.Column="0" Grid.ColumnSpan="3">
<Image.Effect>
<BlurEffect Radius="8"/>
</Image.Effect>
</Image>
<TextBox Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Foreground="White" HorizontalAlignment="Center"
Height="78" Margin="122,10,45.6,0" TextWrapping="Wrap" Text="Library Management System " VerticalAlignment="Top" Width="594" FontSize="40" FontWeight="Bold" FontStyle="Normal">
<TextBox.VerticalContentAlignment>Center</TextBox.VerticalContentAlignment>
<TextBox.IsReadOnly>True</TextBox.IsReadOnly>
</TextBox>
<Canvas Grid.Column="1" HorizontalAlignment="Stretch" Width="auto" Height="300" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" Background="White">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0.627"/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Label Content="Login" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Background="BurlyWood" FontSize="15" Height="52" Width="254">
<Label.FontWeight>Bold</Label.FontWeight>
</Label>
<TextBox Height="24" Canvas.Left="20" TextWrapping="Wrap" Text="User Name" TextAlignment="Center" Canvas.Top="84" Width="120" Foreground="Gray"/>
<PasswordBox Canvas.Left="20" Canvas.Top="136" Height="34" Width="120"/>
</Canvas>
</Grid>
Setting the horizontal and vertical alignment to stretch instead of setting width and height of the widget will do the trick. But still you can set a margin if you want. Tried this out and it ensured that when the window size is changed the widget will adjust respectively.
I'm having some trouble displaying a rotated progress bar. Ideally I would like to have no gap between the progress bar and textblock. Any suggestions?
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<ProgressBar Height="20" Width="430">
<ProgressBar.RenderTransform>
<RotateTransform Angle="-90" />
</ProgressBar.RenderTransform>
</ProgressBar>
<TextBlock Width="100" Height="500" Text="test" />
</StackPanel>
Try LayoutTransofrm instead of RenderTransform:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<ProgressBar Height="20" Width="430">
<ProgressBar.LayoutTransform>
<RotateTransform Angle="-90" />
</ProgressBar.LayoutTransform>
</ProgressBar>
<TextBlock Width="100" Height="500" Text="test" />
</StackPanel>