I'm developping with VS 2015 and WPF a mask designer, in which i can drag, move and resize controls.
One of These controls is a Label which has a TextBlock as Content.
This looks in my XAMl like that:
<Label Background="AliceBlue" HorizontalAlignment="Left" Margin="10,5,0,0" VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Height="Auto">Label</TextBlock>
</Label>
For the TextBlock i have set TextWrapping to "Wrap" and Height to "Auto".
When i try to resize the height of the Label at it's allowed minimum, the content of the TextBlock shall still be completely visible.
I tried this with a TextBlock and it worked.
But when i try it with a Label implementing a TextBlock it doesn't work, the content of the TextBlock isn't completely visible anymore.
How can i synchronize the parent's height to the child's height?
Thanks in advance!
Patrick
You can use the Name of parent and bind its ActualHeight
<Label x:Name="parentElementName" Background="AliceBlue" HorizontalAlignment="Left" Margin="10,5,0,0" VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Height="{Binding ActualHeight, ElementName=parentElementName}">Label</TextBlock>
</Label>
Edit
<Label x:Name="parentElementName" Background="AliceBlue" Height="{Binding ActualHeight, ElementName=Child}"HorizontalAlignment="Left" Margin="10,5,0,0" VerticalAlignment="Top">
<TextBlock x:Name="Child" TextWrapping="Wrap" Height="Auto">Label</TextBlock>
</Label>
#Ghassen's answer is basically correct. If you want to bind the parent to the child then reverse the answer above. The reversed code is shown below.
<Label x:Name="ParentLabel" Height="{Binding ElementName=ChildBlock, Path=ActualHeight}" Width="{Binding ElementName=ChildBlock, Path=ActualWidth}" Background="Blue">
<TextBlock x:Name="ChildBlock" Height="100" Width="100" Background="Green"></TextBlock>
</Label>
Related
I am using a grid with single row. I have placed a single LongListSelector within that row. The ItemTemplate is as follows,
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<!--when we dont mention any of the height and width properties then control tries to first occupy the minimum height/width required and then it streches to the extent it is possible-->
<phone:LongListSelector Grid.Row="0" x:Name="CLASS1">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="25,20" Background="#FF616464" Width="Auto">
<TextBlock Text="{Binding title, Mode=TwoWay}" FontSize="40" Margin="20,20" Foreground="White" TextAlignment="Left" TextWrapping="Wrap" FontStyle="Normal" FontFamily="Segoe UI"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
Now I know that if we don't mention the width,MaxWidth values in the XAML file or in the properties, the Textblock above will stretch itself to the width it really needs to fit in the text. If there still some more width remaining it will expand till that extent. However I want to wrap the text of the Textblock. At the same time I want to utilize all the width available for stretching the TextBlock. So basically I want that the Textblock to stretch itself using the maximum width available and if the Text within it is still longer then I want to wrap it. Is there any solution to achieve this. I can use text wrap by setting constant value for width. As I want to deploy this application on different models then can I make it generic? Is there anyway to use parent's width?
All you have to do is to replace StackPanel with Grid.
<DataTemplate>
<Grid Margin="25,20" Background="#FF616464" Width="Auto">
<TextBlock Text="{Binding title, Mode=TwoWay}" FontSize="40" Margin="20,20" Foreground="White" TextAlignment="Left" TextWrapping="Wrap" FontStyle="Normal" FontFamily="Segoe UI"/>
</Grid>
</DataTemplate>
Result:
try this property
HorizontalContentAlignment="Stretch"
How to use VerticalAlignment="Stretch" with a Label inside a Canvas? I'm trying to center the text "Cancel" in the button as in the code below. To use fixed height and width for the label isn't a desired option.
<Button Name="buttonCancel" Width="80" Height="40" IsCancel="True" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Canvas>
<Label Canvas.Top="0" Canvas.Left="0" Padding="0" FontSize="10">Esc</Label>
<Label VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">Cancel</Label>
</Canvas>
</Button>
Use a binding to the Canvas's ActualWidth:
<Canvas>
<Label Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Canvas}}, Path=ActualWidth}">...</Label>
</Canvas>
But as mentioned above, if you are interested in dynamic stretching layouts, the Canvas is not the ideal choice of control.
A Canvas does not perform any scaling layout of its contents; if you want to scale the contents, you could use Grid in this case, which will, by default, scale both Label elements to fill the Content space.
Assuming you need the canvas for other objects that are of a fixed nature, you could overlay the Canvas on a Grid, and then put the labels in the grid. You can put the labels before the canvas to make them background z-index (overwritten by canvas objects) or after the canvas to make them higher z-index (will overwrite canvas objects). For example:
<Button Name="buttonCancel" Width="80" Height="40" IsCancel="True" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid>
<Label Padding="0" FontSize="10">Esc</Label>
<Label VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">Cancel</Label>
<Canvas>
<!-- Your Canvas content here -->
</Canvas>
</Grid>
</Button>
Repeating my solution from the comments, since (a) you really don't want a Canvas and (b) it sounds like this solved your problems, so I'll make it an answer where it will be more visible to others.
Canvas is meant for fixed-pixel-size layouts, which is probably the least common case. You should replace your Canvas with a Grid as shown below, so that both Labels are laid out dynamically (and independently) within the available space:
<Grid>
<Label Padding="0" FontSize="10">Esc</Label>
<Label VerticalAlignment="Center" HorizontalAlignment="Center">Cancel</Label>
</Grid>
I am kinda new to WPF, dont know if the question is weird. I wanted to know if its possible to add a border around the text inside a textBlock.
EDIT:
As per suggestion I have tried both but without much success:
<Border BorderBrush="#FF0B232F" BorderThickness="2">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
and
<Label BorderBrush="#FF0B232F" BorderThickness="2,2,2,2" Content="TextBlock" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" />
Am I doing something wrong here?
In such cases I use Label or TextBlock placed in Border.
Both your approaches are correct, however, if you have the textblock/label inside a grid (or any other container) declared as you have, its contents will stretch.
Try setting the VerticalAlignment and/or HorizontalAlignment to an appropriate setting (Top/Left, Center)..
something like this:
<Border BorderBrush="#FF0B232F" BorderThickness="2" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
Assuming that you are asking for a full size TextBlock with a border overlay within the bounds of the TextBlock you could wrap it in a Grid and draw the borders over the top of the TextBlock like this...
<Grid HorizontalAlignment="Left">
<TextBlock Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black" />
<Border BorderBrush="#FF0B232F" BorderThickness="2" />
</Grid>
Because we haven't specified the grid row and column on the TextBlock and Border objects the border overlays on top of the TextBlock.
if you just want to have a border around your textblock or any other control use :
<Border>
<TextBlock></TextBlock>
</Border>
you set border properties like color ,cornerradius ,thickness,...
I'm a beginner in silverlight so i hope i can get an answer that brings me some more light in the measure process of silverlight.
I found an interessting flap out control from silverlight slide control
and now I try to use it in my project. So that the slide out is working proper, I have to place the user control on a canvas. The user control then uses for itself the height of its content. I just wanna change that behavior so that the height is set to the available space from the parent canvas.
You see the uxBorder where the height is set. How can I measure the actual height and set it to the border?
I tried it with Height={Binding ElementName=notificationCanvas, Path=ActualHeight} but this dependency property has no callback, so the actualHeight is never set.
What I want to achieve is a usercontrol like the tweetboard per example on Jesse Liberty's blog
Sorry for my English writing, I hope you understand my question.
<Canvas x:Name="notificationCanvas" Background="Red">
<SlideEffectEx:SimpleSlideControl GripWidth="20" GripTitle="Task" GripHeight="100">
<Border x:Name="uxBorder"
BorderThickness="2"
CornerRadius="5"
BorderBrush="DarkGray"
Background="DarkGray"
Padding="5" Width="300"
Height="700"
>
<StackPanel>
<TextBlock Text="Tasks"></TextBlock>
<Button x:Name="btn1" Margin="5" Content="{Binding ElementName=MainBorder, Path=Height}"></Button>
<Button x:Name="btn2" Margin="5" Content="Second Button"></Button>
<Button x:Name="btn3" Margin="5" Content="Third Button"></Button>
<Button x:Name="btn1_Copy" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy1" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy2" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy3" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy4" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy5" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy6" Margin="5" Content="First Button"/>
</StackPanel>
</Border>
</SlideEffectEx:SimpleSlideControl>
Hey - a couple of things:
I'm guessing it's just a typo, but: "{Binding ElementName=MainBorder, Path=Height}" should be "{Binding ElementName=uxBorder, Path=Height}" (or ActualHeight)
The SlideEffect appears to set a clip geometry, which is going to affect how "big" it looks
RectangleGeometry clipRect = new RectangleGeometry();
clipRect.Rect = new Rect(0, 0, panel.ActualWidth, host.Height);
host.Clip = clipRect;
If you comment out the above lines from the slide control, you should see a noticeable change in how big the panel looks.
I think that the ActualWidth or ActualHeight properties are not settable only gettable.
For that you won't be able to use binding, maybe if you create the element after the page has been loaded, since the Canvas Actual Size on the moment of the creation will be unknown.
Why don't you try creating a Property for this, with two way binding, and sign the Canvas event on layoutUpdated and update the value of the property, therefore updating all dependent objects.
I Don't know if this event is the right one, by check if it help's you.
The labels in the example below (WPF/XAML) just parade off the screen, no wrapping occurs. Removing the orientation works, but doesn't provided the needed functionality/look & feel. Any ideas how to make the WrapPanel wrap to the current size of the StackPanel?
<Window Height="300" Width="600">
<StackPanel Orientation="Horizontal">
<WrapPanel>
<Label Height="28" Name="label1" Width="120">First Name</Label>
<Label Height="28" Name="label2" Width="120">John</Label>
<Label Height="28" Name="label3" Width="120">Last Name</Label>
<Label Height="28" Name="label4" Width="120">Smith</Label>
<!-- ...more labels!... -->
</WrapPanel>
<!-- ...other controls/panels... -->
</StackPanel>
</Window>
You can bind the WrapPanel's MaxWidth to the StackPanel's ActualWidth.
I haven't tried this, but basically:
<WrapPanel MaxWidth="{Binding ActualWidth, ElementName=myStackPanel}"/>
What you're doing isn't possible because of the algorithm that StackPanel uses when doing horizontal layout. It's basically going to ask each child element how big it wants to be and however much space it asks for it's going to give it.
You would either need to:
Set a Width or MaxWidth on the WrapPanel.
Use a WrapPanel as the outer panel in place of the StackPanel.