Aligning Button and multiline textblock in Stack panel Silverligh - c#

Here is the scenarion:
---------- ++++++++++++
--Button-- +Text block+
---------- ++++++++++++
In WPF is extremely easy with a dock panel. What is the way to achieve this in Silverlight.

Try a StackPanel and make its orientation Horizontal. You can then adjust the vertical and horizontal alignment of the stack panel's children to your needs.
ie:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="High" VerticalAlignment="Center"></Button>
<TextBlock Margin="10" Width="100" Text="Insert Text Here" TextWrapping="Wrap" VerticalAlignment="Center"/>
</StackPanel>

You can use the DockPanel in Silverlight too, thanks to the Silverlight toolkit.
After installing the toolkit you can add the following namespace in your XAML:
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
Then in your element's attributes add:
toolkit:DockPanel.Dock="Right"
Of course change "Right" to: Right, Left, Top, or Bottom as needed.

Related

How to make a border around a stackpanel which stops at the last element inside it?

Currently I have a stackpanel with 2 buttons which I have placed in a single row whithin my grid. I want to draw a border around the stackpanel, but the stackpanel is filling the whole row, it doesnt stop at the last button (as expected I suppose):
Image of border around stackpanel
How can I modify this so the stackpanel or border stops at the last element without hardcoding or dynamically calculating a bottom margin?
<Border Background="#FF303841"
Margin="5"
CornerRadius="3"
Grid.Row="2"
Grid.Column="4">
<StackPanel>
<TextBlock Text="OTHER"
Foreground="White"
FontWeight="Medium"
FontFamily="Poppins"
FontSize="16"
HorizontalAlignment="Left"
Margin="5,5,0,0"/>
<Button Style="{StaticResource linkBtn}">TEST1</Button>
<Button Style="{StaticResource linkBtn}">TEST2</Button>
</StackPanel>
</Border>
As per emoacht's comment above, the solution was to simply add VerticalAlignment="Top" to the border. That made it stop filling the parent which was the grid row.
The cause of this behavior is that the default parameter for VerticalAlignment is stretch, so it needs to be overridden.

how to give height of a parent to child in UWP

I have a stack panel and it has one grid and I'd like the grid to have same height as stack panel.
I tried playing with VerticalAlignment stretch or height 100% nothing works
I tried setting the values programatically OnNavigatedTo but it doesn't have the effect
Any suggestions to resolve this are welcome
Please find the code below
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" Orientation="Vertical" Name="ProgressOverlay">
<Grid Name="Overlaygrid"">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Foreground="Black" FontSize="25” T HorizontalAlignment="Center" Text="Loading"/>
</StackPanel>
</Grid>
</StackPanel>
A StackPanel takes by default the size needed by its content and shrinks to the size required, while a container control like Grid stretches to the full size available (e.g full page).
If you want to keep the outer StackPanel, you will have to set VerticalAlignment="Stretch" on the StackPanel, not on the Grid.
But since the Grid is the only single content item in your outer StackPanel, you can remove it and move the properties Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" to the Grid. Always try to keep your XAML structure as simple as possible.

An user control as Tool tip for WPF TextBlock

I have a TextBlock having a canvas as its ToolTip. An user control is bounded to the canvas from the back-end in constructor. The TextBlock defined in xaml as follows:
<TextBlock Width="60" Height="40" Text="More info.">
<TextBlock.ToolTip>
<Canvas Name="canToolTip"></Canvas>
</TextBlock.ToolTip>
</TextBlock>
The constructor definition will be :
public UC_PublicationAdd()
{
InitializeComponent();
// assign datacontext
canToolTip.Children.Add(new ToolTipControl());
}
The whole scenario is fine Now let me come to the Problem. When i place the mouse over the TextBlock ToolTip is showing but its size is not controllable. What i mean is that, size of tooltip is too smaller(default size when tooltip text is not present). I want the tooltip equal to the size of the canvas
Sorry for Make you Confused, finally i solved the issue by assigning width and height to the canvas inside the tooltip. The xaml looks like the following:
<TextBlock Width="60" Height="40" Text="More info.">
<TextBlock.ToolTip>
<Canvas Name="canToolTip" Height="80" Width="130"></Canvas>
</TextBlock.ToolTip>
</TextBlock>

Scrollviewer panning position on touch

I have a scrollviewer in which I have 2 WrapPanels. I would like to know how I would go about getting the scroll viewer position once a user scrolled to the last end of the last panel. I am trying to show and hide an on screen arrow that indicates there is more content, but off to the right of the screen, but I would like to hide the button once they get to the end of the scroll viewer.
Can someone point me in the direction of what I would do in the code behind to get the horizontal offset position of the scrollviewer based on the panning. Mainly I want to get the far right position and hide the Arrow button when it gets to that point. My width for each Panel is currently 1920, so the window is currently 1920 width which hides the next panel in the Stack.
My XAML currently is below:
<ScrollViewer x:Name="scrVwrProductCategories" Style="{DynamicResource scrVwrFullWidthHorizontal}" PanningMode="HorizontalOnly" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled">
<StackPanel Width="Auto" Height="750" HorizontalAlignment="Right" Orientation="Horizontal">
<WrapPanel Style="{DynamicResource wrpPnlProductCategoriesPanels}" x:Name="wrpPnlProductCategories">
<!-- Constant currently for count of buttons per WrapPanel = 6-->
<!-- This is filled in dynamically at runtime
<controls:btnLarge Height="325" Width="500" Margin="20,0" TitleText="My Item" NoteText="" ShowNote="Collapsed" ShowSubTitle="Collapsed"/>
-->
</WrapPanel>
<WrapPanel Style="{DynamicResource wrpPnlProductCategoriesPanels}" x:Name="wrpPnlProductCategories2">
<!-- Constant currently for count of buttons per WrapPanel = 6-->
<!-- This is filled in dynamically at runtime
<controls:btnLarge Height="325" Width="500" Margin="20,0" TitleText="My Item" NoteText="" ShowNote="Collapsed" ShowSubTitle="Collapsed"/>
-->
</WrapPanel>
</StackPanel>
<Kiosk:SwipeForMoreArrow x:Name="ctrlSwipeForMoreArrow" HorizontalAlignment="Right" VerticalAlignment="Center" Visibility="Collapsed"/>
</ScrollViewer>
Do you aim to make this possible only through XAML? Otherwise you could try to get the this.HorizontalOffset of the Scrollviewer via the OnScrolledChanged Event to identify wether it´s 0 or max.
Maybe this link might help too:
How to find that ScrollViewer is scrolled to the end in WPF?

XAML WP8 and making a 'TextBlock' scroll down

Alright, so I have a XAML page with a TextBlock in a Windows Phone 8 application. My dilemma is this:
I pragmatically add more content (formatted lines with Inlines.Add(new Run...) to the TextBlock. The text block is currently filled from bottom to up because of the ScrollViewer in the sense that a line appears in the bottom after another. I would also be fine with them starting to appear from the top as long as the TextBlock would continue to scroll down (actually this might look better) once it is full. My TextBlock is inside a ScrollViewer as below:
<Popup x:Name="send_message_xaml" Grid.Row="1" VerticalOffset="0" Width="750" Height="auto">
<StackPanel Orientation="Vertical" Margin="0,0" Width="auto" Height="auto">
<ScrollViewer Height="345" HorizontalAlignment="Left" Margin="0,0,0,0" Name="scrollViewer1" VerticalAlignment="Bottom" Width="420" VerticalScrollBarVisibility="Auto">
<TextBlock x:Name="message_log" Margin="40,50,0,0" TextWrapping="Wrap" Width="420" VerticalAlignment="Top" FontSize="22"/>
</ScrollViewer>
<TextBox x:Name="message_to_send" InputScope="Chat" Width="480" KeyDown="message_to_send_KeyDown" Margin="15,0"/>
</StackPanel>
</Popup>
How can I get the textblock to scroll so that the newest appended message is always at the bottom? I found a bunch of these threads but none seem to solve my problem so far. Do I need to add some code somewhere with the appending?
You need to update the VerticalOffset based on the ScrollableHeight. When you add new inlines to the TextBlock, its height is going to change and that will notify the parent ScrollViewer. So, after you add new items to the inlines, run the Measure method and update the VerticalOffset.
Here is an example.

Categories

Resources