I have a DockPanel inside another DockPanel the first one is set to be docked on the whole form, but the second one is set on the top of the form and it has three buttons inside it, the background color of it is set to grey, and I can see the content blue border in the editor but it doesn't have a color or a text in it, and when I run the application there is nothing no button no colors nothing.
Here is the XAML code:
<Grid Background="White">
<DockPanel Name="MainBackground">
<DockPanel Name="Top" Height="32" Background="#FF707070" DockPanel.Dock="Top" Margin="0, 0, 0, 1000">
<Button
Width="46"
Height="32"
DockPanel.Dock="Right"
Margin="687,0,0,398"
Background="White" Click="Button_Click_1">
<StackPanel Orientation="Horizontal">
<Image Source="Res/RDI.png" Width="20" Height="20"/>
</StackPanel>
</Button>
<Button
Width="46"
Height="32"
Content="×"
FontSize="20" DockPanel.Dock="Right" Click="Button_Click" Margin="734,0,0,398" Background="White"/>
</DockPanel>
</DockPanel>
</Grid>
The issue is that you try to position all controls using Margin, which defeats the purpose of a DockPanel. You can select each of the buttons in XAML and look at the designer in Visual Studio. They are all positioned way off. Do not every use this kind of brittle positioning in WPF. There are lots of panels that already take care of that way easier and responsive to resizing.
For example, try the code below. I removed all the Margins and just set the DockPanel.Dock to Right for the buttons. Please note, that you have to set the LastChildFill to false, otherwise the last control placed in the DockPanel will take up the remaining space and is centered in there, regardless of setting a DockPanel.Dock value on it.
If you set the LastChildFill property to true, which is the default setting, the last child element of a DockPanel always fills the remaining space, regardless of any other dock value that you set on the last child element. To dock a child element in another direction, you must set the LastChildFill property to false and must also specify an explicit dock direction on the last child element.
For the outer DockPanel, I just added a new last Grid that takes up the remaining space. If it was not there, you would also have to set the LastChildFill, otherwise the bar would be centered in the window.
<Grid Background="White">
<DockPanel Name="MainBackground">
<DockPanel Name="Top" Height="32" Background="#FF707070" DockPanel.Dock="Top" LastChildFill="False">
<Button
Width="46"
Height="32"
DockPanel.Dock="Right"
Background="White" Click="Button_Click_1">
<StackPanel Orientation="Horizontal">
<Image Source="Res/RDI.png" Width="20" Height="20"/>
</StackPanel>
</Button>
<Button
Width="46"
Height="32"
Content="×"
FontSize="20" DockPanel.Dock="Right" Click="Button_Click" Background="White"/>
</DockPanel>
<StackPanel>
<TextBlock Text="This is where your content would be placed."/>
<TextBlock Text="Alternatively, set the last child fill of the dock panel to false."/>
</StackPanel>
</DockPanel>
</Grid>
Now the buttons are automatically positioned to the right, next to each other.
Of course, you could create the same layout with other panels as well, but since it is not clear what your final layout should look like, I can only provide this example using your structure.
It's here quite sure but with a margin of Margin="0, 0, 0, 1000" propably it's anywhere.
I think this is the issue.
[EDIT] And I see more of these "3 digit margins". Avoid that, it's not how WPF is meant to be used. Use margins as "a little bit of space around the element"
Related
I have TabControl.
I want move tabs to the left but window with content should not change the size.
Result:
My code:
<controls:TabControl Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" x:Name="MyTabControl" BorderBrush="Transparent" BorderThickness="0" Padding="0">
<controls:TabControl.Resources>
<DataTemplate x:Key="ClosableTabItem">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="textBlockName" VerticalAlignment="Center" Text="{Binding}"/>
<HyperlinkButton Margin="6,0,0,0" x:Name="tabItemClose" VerticalAlignment="Center"
Click="tabItemClose_Click">
</HyperlinkButton>
</StackPanel>
</DataTemplate>
</controls:TabControl.Resources>
<controls:TabItem Header="Main" x:Name="MainTabItem" ToolTipService.ToolTip="Main" >
</controls:TabItem>
</controls:TabControl>
I won't really post a huge answer with a lot of XAML , rather i will give you some basic ideas of what you can do :)
1.Inside each tabitem,just add a grid and create two columns.Place every required element in the middle column and make sure the Grid's HorizontalAlignment and VerticalAlignment are set to Stretch
You can customize the template of your tabcontrol and set required width/margin of TabPenl/ContentPresenter.
I think 1 is the easiest solution so far,if you want to use 2 , leave a comment and i'll add some helpful XAML
Hope this helps :)
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.
This textbox never lets me scroll. I am fairly certain it's because it is vertically expanding to "show" all the text. However, it is expanding past (and underneath) the bottom of the grid row it's in, so the text is not being displayed - yet the scroll bars are disabled (because it thinks there is no reason to show them).
The result is I see the top of the text in the file, and it gets cut off when it reaches the bottom of the grid cell it's in.
What do I need to do to tell the control: "Expand to the width and height of the grid cell you're in, and show the vertical scroll bar when the text won't fit in that space"?
<StackPanel Grid.Column="1" Grid.Row="1">
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Visible">
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</ScrollViewer>
</StackPanel>
If you change it to this it will work.
<ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel>
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
But in same time you have to make sure that your grids height is set to * or a fixed size:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> //Or whatever size you want
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel>
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
</Grid>
Btw, your StackPanel is redundant unless you have more controls inside it.
EDIT:
Well... First of all like mm8 and user2837961 explained a Scrollviewer doesn't make sense inside a StackPanel, because StackPanel can get expanded infinite. ScrollViewer only works when the object inside it are bigger than the size if it self. By giving your Grid row the size of *, you assign the remaining space of the grid for that row, means that items belonging to that row gets a fixed size. And if your Textbox is bigger than the ScrollViewer size the ScrollBarVisibility will be triggered.
Why do you need a StackPanel? I suggest you remove it and place the Grid.Column and Grid.Row in the ScrollViewer:
<ScrollViewer Grid.Column="1" Grid.Row="1" CanContentScroll="True" VerticalScrollBarVisibility="Visible">
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</ScrollViewer>
Putting ScrollViewers inside StackPanels is a bad idea. This is because a StackPanel measures its children with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical. Please refer to my answer here for more information about this:
Horizontal scroll for stackpanel doesn't work
This basically means that the ScrollViewer element has an infinite height here and thus no vertical scrollbar is displayed.
So, as suggested by #user2837961, you should simply get rid of the StackPanel:
<ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Visible">
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</ScrollViewer>
Also make sure that there is no other StackPanel further up the visual tree.
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.
I have a a TreeView that fills the top part of the application, but since the number of items in the TreeView changes, my Apply button changes its position vertically. Is there a way to anchor it to the bottom part of the window, so it's always on the right bottom part of the window, i.e. 10x10 distance from the right bottom edge.
You can either set the HorizontalAlignment and VerticalAlignment on the TreeView or Button (I cannot tell which control you are trying to anchor), or you could place the control inside a DockPanel.
To space the control away from others use the Margin.
Margin="0 0 10 10"
will give you the margin only on the right and bottom
I hope this makes it a bit clearer:
<Window>
<DockPanel VerticalAlignment="Stretch">
<TreeView DockPanel.Dock="Top" />
<Button DockPanel.Dock="Bottom" Margin="0 0 10 10" />
</DockPanel>
</Window>
To achieve anchoring, Set following properties:
Width="auto"
Height="auto"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Set margins as needed.
Example:
<TabControl
Name="tabControl1"
HorizontalAlignment="Stretch"
Margin="40,40,40,40"
Width="auto"
Height="auto"
VerticalAlignment="Stretch">
I think you need this in the XAML of your button:
HorizontalAlignment="Right" VerticalAlignment="Bottom"