Canvas position based on another element - wpf

Basically I want a Canvas to act like a StackPanel. So how do set the Canvas.Top="" based on Canvas.Bottom of another element?
Background: Trying to make an Expander that when expanded it will go over other elements. Figured using a Canvas ZIndex would be the best way to do this. So I created this:
<StackPanel Orientation="Vertical" >
<Canvas Height="{Binding ActualHeight, ElementName=MyExpander}">
<Expander Panel.ZIndex="1" Name="MyExpander" Header="Header" >
<StackPanel Background="LightGray">
<TextBlock Text="Some text" />
<TextBlock Text="Some text" />
<TextBlock Text="Some text" />
<TextBlock Text="Some text" />
<TextBlock Text="Some text" />
<TextBlock Text="Some text" />
</StackPanel>
</Expander>
<StackPanel Panel.ZIndex="0" Canvas.Top="20" Margin="0,5,0,0">
<Button Content="Button1" />
<Button Content="Button2" />
<Button Content="Button3" />
</StackPanel>
</Canvas>
</StackPanel>
Now this works perfectly the problem is that Canvas.Top="20" is hardcoded into the XAML. So that means if the font gets increased (the user increased font sizing in Windows) then part of the StackPanel will be under the Expander. I tried this:
Canvas.Bottom="{Binding (Canvas.Bottom),ElementName=MyExpander}"
The issue being is that value for for Canvas.Bottom for MyExpander is NaN so that isn't going to work.
FYI if there is a better way to do the Expander expands over top of elements I am open to that as well.
thanks

Well this doesn't seem like the greatest answer but it worked for me.
foreach (var exp in MyCanvas.Children)
{
Expander ep = (Expander)exp;
double h = ep.ActualHeight;
Canvas.SetTop(ep, y);
y = y + h + 20;
}
Should note it goes without saying that foreach loop is a bit more complicated due to correct parsing of the objects in the MyCanvas

Related

WPF XAML Rotate 90° in UWP margin issue

Hi I'm struggling with rotation in XAML. I found a solution that LayoutTransform should solve this issue, but on Windows Universal Plattform this option isn't available!
This is my Code:
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
HorizontalAlignment="Center">
<Rectangle Fill="Red" Height="100" Width="100" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"
Text="long long long long long long long long text"
RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform Rotation="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<Rectangle Fill="Green" Height="100" Width="100" />
</StackPanel>
But as you can see there are an huge margin between the colored boxes and the textblock as you can see here:
So my first guess was to add an Width="30" property to the textblock, but this isn't working as you can see here (not only the offset is the problem, but the cropping is the problem):
Any suggestions?
Try the LayoutTransform control of the WinRTXamlToolkit. Following links should help.
Github Source link and Demo link

Grouping labels and hyperlink button together in silverlight

I have a label and a hyperlink button in silverlight and I would like to group them together so that the alignment is done on that group rather that having to align two different elements. Any idea of how this could be done please?
<TextBlock Text="Hello" Foreground="Black" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,177,6"/>
<HyperlinkButton NavigateUri="http://www.mywebsite.mt/" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,132,6">
<TextBlock Text="myWebsite" Foreground="Black" TextDecorations="Underline" />
</HyperlinkButton>
I want these a group, so I could only use 1 margin alignment
You shouldn't really need to use Margin like that, but since it looks they would just sit on top of one another you could of course use something like StackPanel to accomplish it.
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,0,6">
<TextBlock Text="Hello"/>
<HyperlinkButton Content="myWebsite" Foreground="Black" NavigateUri="http://www.mywebsite.mt/"/>
</StackPanel>
Hope this helps.

WPF Dockpanel won't align right

I have this code on which I use a DockPanel on a Button.Content. However it doesn't let me right align the last image (small arrow).
<Button Height="70"
HorizontalContentAlignment="Left">
<Button.Content>
<DockPanel LastChildFill="False">
<Image DockPanel.Dock="Left"
Height="50"
Width="50"
Source="{StaticResource Placeholder}"
Stretch="UniformToFill"
Margin="5" />
<TextBlock DockPanel.Dock="Left"
Text="Dummy text"
VerticalAlignment="Center"
Margin="5" />
<Image DockPanel.Dock="Right"
Height="24"
Width="24"
Source="{StaticResource Right_Arrow_24}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Stretch="UniformToFill"
Margin="5" />
</DockPanel>
</Button.Content>
</Button>
It now gives me this:
So the right small arrow should be placed on the right of the button and not just after the TextBlock.
I've found some similar issues and it looks like I did it correct, but somehow it isn't..
What am I doing wrong here?
Try to set the HorizontalContentAlignment of your button to "Stretch". Otherwise your DockPanel will use the size need by its content, then align left. You can confirm this behaviour by using different text lengths for your TextBlocks
You simply have to append an extra child to the DockPanel (say an empty Canvas) without the DockPanel.Dock attribute, so that all the remaining space is assigned to it.
In general, DockPanel only works fine only when its last child has no Dock constraint
Try setting
HorizontalContentAlignment="Stretch"
On your button.

How to align the bottom edge of multiple TextBlocks with different FontSize

Here is the XAML sample:
<StackPanel Orientation="Horizontal" >
<TextBlock VerticalAlignment="Bottom" Text="Text1" FontSize="20" />
<Image VerticalAlignment="Bottom" ... />
<TextBlock VerticalAlignment="Bottom" Text="Text2" />
</StackPanel>
The result is that the textblocks have different bottom-margins depending on their FontSizes, but I need them all to be on one bottom line with no margins. How to get it? In my case I cant use TextBlock + Runs.
Forget several blobks : the bottom position dépends of the font size.
But, in a single paragraph, write the flow of your objects
You should use something like this :
<RichTextBlock>
<Paragraph>
<Span FontSize="148">Hello</Span>
<InlineUIContainer>
<Image Source="Assets/Logo.png"></Image>
</InlineUIContainer>
<Span FontSize="36">again</Span>
</Paragraph>
</RichTextBlock>

WPF textblock cuts off multiple lines on windows 7

I am using a textblock to display the product description under the product's image. The text must be fixed 100px wide but the height can grow up to 30px tall. If the text still can't fit, it must display ellipsis. Here is my xaml:
<StackPanel>
<!-- I use canvas here to reserve some space for animation (grow/shrink) -->
<Canvas Height="75" Width="75">
<Image x:Name="picture" Height="64" Width="64" .../>
<Canvas/>
<TextBlock Width="100" MaxHeight="30"
TextTrimming="CharacterEllipsis" TextWrapping="Wrap"
Text="{Binding Path=ProductDescription}"
HorizontalAlignment="Center" VerticalAlignment="Top" TextAlignment="Center">
</StackPanel>
The description can have multiple lines. For eg, "Wireless Mouse\nQuantity:20". It looks ok on XP but on Windows 7 only the first line shows up and there's no ellipsis. Can anyone spot the problem in my xaml?
There are several errors in your example: should , ".../>" isn't valid XAML and your TextBlock doesn't have a closing tag.
The follow XAML worked fine on for me on Windows 7:
<StackPanel>
<!-- I use canvas here to reserve some space for animation (grow/shrink) -->
<Canvas Height="75" Width="75">
<Image x:Name="picture" Height="64" Width="64" />
</Canvas>
<TextBlock Width="100" MaxHeight="30"
TextTrimming="CharacterEllipsis" TextWrapping="Wrap"
Text="I use canvas here to reserve some space for animation (grow/shrink)"
HorizontalAlignment="Center"
VerticalAlignment="Top"
TextAlignment="Center" />
</StackPanel>
Depending on the font size MaxHeight of 30 is almost just one line of text, so the textblock can't grow in height. Change it or remove it completely.

Resources