I have a overlay control with a grid with few controls on it. On my WPF window I create an instance of this overlay as below
<overlays:OverlaySelector x:Name="Selector" Grid.Row="2" Grid.RowSpan="2" Grid.Column="3" Height="Auto"/>
My problem is that when I re-size my WPF window the overlay does not re-size. What could be the problem?
You shouldn't be manually resizing controls in WPF. Proper use of your control should do that for you. Try using the FrameworkElement.HorizontalAlignment, FrameworkElement.VerticalAlignment and FrameworkElement.Margin properties to automatically resize the control for you when the Window is resized. Try something like this:
<overlays:OverlaySelector x:Name="Selector" Grid.Row="2" Grid.RowSpan="2"
Grid.Column="3" Height="Auto" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="20" />
Of course, this won't work if you have hard coded any size or dimension values inside your OverlaySelector control.
Related
Not sure if this is hard to do in XAML, but I have some TextBlock that I am showing on top of the main window using a fixed font size.
If this is larger than the main window, it resizes the main window. I don't want this. I tried this so far but couldn't prevent the main window from getting resized horizontally.
What I want is to resize the TextBlock if it's not going to fit the main window width. Main window width is dynamic so I can't use a fixed unit value.
Here is the code:
<Viewbox StretchDirection="DownOnly">
<Grid Name="InfoTextOverlay" Visibility="Hidden" HorizontalAlignment="Center">
<TextBlock Text="{Binding InfoText, ElementName=MyMainWindow}" Foreground="White" FontSize="40" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Viewbox>
if you want to avoid auto width, use TextWrapping="Wrap".
or
Just remove the FontSize property if you need auto-resizing of the text block
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.
i have a question about resizing.
I know the function of a splitter is to split some elements in the form without resizing the parent. The splitter splits the 100% of the parentsize in e.g. 40% and 60%. But in my case i need a splitter or something like that, which resize the parent (UserControl) and not the other element (Panel).
For example i have 2 panels with the height of 50px and 50px. Between them there is a splitter which resizes now one panel to 70px. The second panel should keep the 50px and the UserControl should resize to 120px.
Furthermore in my application the UserControl is added to a panel with autoscroll = true to show a vertical scrollbar. Does anyone have an idea to realize this?
You could try coding some action inside the splitter event that will change your window size. However it is counter intuitive (does not follow standard windows ui) that a window will resize following an action from the inside.
Consider setting your grid row definitions in a way that only the top one resizes when then window is resized. e.g. below for columns. the example is from a working real page that does what you asked (the columns on the right side are not squeezed or stretched when the windows is resized). Note that the splitters in the actual page xaml are far below (after all the content panels).
<Grid.ColumnDefinitions>
<ColumnDefinition Name="ThirdCol0" Width="353"></ColumnDefinition>
<ColumnDefinition Name="ThirdCol1" Width="*"></ColumnDefinition>
<ColumnDefinition Name="ThirdCol2" Width="*" MaxWidth="100"></ColumnDefinition>
<ColumnDefinition Name="ThirdCol3" Width="117" MaxWidth="267"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- here there are different panels etc -->
<GridSplitter x:Name="MidSplitter" DragCompleted="MidSplitter_DragCompleted" SnapsToDevicePixels="True" Grid.Row="0" Grid.Column="1"
Width="5" Opacity="0.2" VerticalAlignment="Stretch" HorizontalAlignment="Right"
ShowsPreview="False"></GridSplitter>
<GridSplitter x:Name="Col2Splitter" DragCompleted="MidSplitter_DragCompleted" Grid.Row="0" Grid.Column="2"
Width="5" Opacity="0.2" VerticalAlignment="Stretch" HorizontalAlignment="Right"
ShowsPreview="False"></GridSplitter>
<GridSplitter DragCompleted="MidSplitter_DragCompleted" Grid.Row="0" Grid.Column="0"
Width="5" Opacity="0.2" VerticalAlignment="Stretch" HorizontalAlignment="Right"
ShowsPreview="False"></GridSplitter>
When the size of your user control changes, you need :
the panel1 to be resized
the panel2 to keep its height unchanged
Am I right ?
In this case, you don't need to use a splitter, but the Dock property of Controls :
Set the panel1.Dock property to DockStyle.Fill : the panel1 will take all available space in the UserControl
Set the panel2.Dock property to DockStyle.Bottom : the panel2 will keep its initial height to stay at the bottom of the UserControl
I hope it helps.
in a WPF window I have a TextBox inside a ScrollViewer:
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" MaxHeight="160" Grid.Column="1" Grid.Row="0">
<TextBox MinHeight="80" Name="generalLog"/>
</ScrollViewer>
With an empty text it looks like this.
When the text gets to long or contains too many lines, the scrollbars appear, as they should. But as the TextBox is wrapped inside the ScrollViewer, the TextBox gets bigger and its border (default style) gets hidden on the sides:
Link to Screenshot because I can't embed pictures
As you can see, the border is not visible on the left side.
Is there any way to make the ScrollViewer appear inside the TextBox? Or make the ScrollViewer have a border like the TextBox and hide the TextBox one, which would probably look the way I want.
Thanks so much.
Wrap the Scrollviewer with a border and set Textbox borderbrush="transparent" ?
<Border>
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" MaxHeight="160" Grid.Column="1" Grid.Row="0">
<TextBox BorderBrush="transparent" MinHeight="80" Name="generalLog"/>
</ScrollViewer>
</Border>
I am creating a drawing metro application for Window 8 using c#. I am Using textblock inside the canvas and Ink-manager for drawing.This work fine but i want to draw a ink only upon the drowntext of textblock not in hole canvas.
Here is code:-
<Canvas Name="canvas" Background="Transparent" >
<TextBlock x:Name="txtblock" Margin="80,0,0,0" Foreground="White"
VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="60"/> </Canvas>
Please help me how to achieve this functionality.
I would think that the most straightforward way is to wrap your TextBlock within another Canvas.
As such, you will have two Canvas, with the child Canvas being positioned within the main Canvas.
One area of concern with this approach would be the sizing of the child Canvas, in which needs to be dynamically resized based on the size of the containing TextBlock.
<Canvas Name="canvas" Background="Transparent" >
<Canvas Name="childCanvas" Background="Transparent">
<TextBlock x:Name="txtblock" Margin="80,0,0,0" Foreground="White" FontSize="60"/>
</Canvas>
</Canvas>