I have two stackpanel inside Dock Panel. When the window is resizing the top panel is overlapping the bottom one.
<Grid>
<DockPanel DockPanel.Dock="Left" LastChildFill="True" Width="{Binding ActualWidth, ElementName=characterLength}">
<!-- Batch information panel: Top -->
<ScrollViewer DockPanel.Dock="Top" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Margin="6,0,0,0">
<StackPanel Orientation="Vertical" Margin="6,0,0,6" >
<TextBlock x:Name="ReadOnlyNoBatchesTextBlock"
DockPanel.Dock="Top"
Text="no batch"
FontSize="19" HorizontalAlignment="left" AutomationProperties.AutomationId="DipIn_BatchReviewView_NoBatches_Text"
FontWeight="Bold"
/>
<TextBlock HorizontalAlignment="Left" FontSize="19" FontWeight="Bold" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchNumber_Text" />
<TextBlock Text="status" HorizontalAlignment="Left" Margin="0,6,0,0" FontSize="16" FontWeight="Bold"
AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmissionStatus_Text">
</TextBlock>
<TextBlock Text="submitted" FontSize="14" HorizontalAlignment="Left"
AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmittedAt_Text">
</TextBlock>
<TextBlock Text="qeqweq" FontSize="14" HorizontalAlignment="Left" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmittedBy_Text" />
<TextBlock Text="ertert" FontSize="16" HorizontalAlignment="Left" Margin="0,6,0,0" FontWeight="Bold" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchProgressed_Text">
</TextBlock>
<TextBlock Text="dsdfgfdg" FontSize="14" HorizontalAlignment="Left" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchProgressedAt_Text" >
</TextBlock>
<!-- Must be last item in the stack panel otherwise you get a vertical gap-->
<TextBlock Grid.Column="0" x:Name="characterLength" Text="abcdefg" HorizontalAlignment="Left" Visibility="Hidden" FontWeight="Bold" FontSize="14" />
</StackPanel>
</ScrollViewer>
<!-- Button panel: Bottom -->
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_SetMarkerStandardised_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3"
AutomationProperties.AutomationId="DipIn_BatchReviewView_AllocateNextStandardisationBatch_Button" />
<!-- Content, Automation Id & Command is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" />
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_AutoProgressBatches_Button" />
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchListFilter_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_SubmitBatch_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_StartStop_Marker_Button">
<TextBlock FontSize="14" Text="a" />
</Button>
</StackPanel>
</DockPanel>
</Grid>
I need that when window is resizing bottom panel should always be visible and top panel will get scroll bar.
I have tried many ways but still getting the same issue from this code the top one will get the scroll bar but only when the bottom one will go invisible
<Grid>
<DockPanel>
<!--<ScrollViewer DockPanel.Dock="Top" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Margin="6,0,0,0">-->
<StackPanel Orientation="Vertical" Margin="6,0,0,6" >
<TextBlock x:Name="ReadOnlyNoBatchesTextBlock"
DockPanel.Dock="Top"
Text="no batch"
FontSize="19" HorizontalAlignment="left" AutomationProperties.AutomationId="DipIn_BatchReviewView_NoBatches_Text"
FontWeight="Bold"
/>
<TextBlock HorizontalAlignment="Left" FontSize="19" FontWeight="Bold" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchNumber_Text" />
<TextBlock Text="status" HorizontalAlignment="Left" Margin="0,6,0,0" FontSize="16" FontWeight="Bold"
AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmissionStatus_Text">
</TextBlock>
<TextBlock Text="submitted" FontSize="14" HorizontalAlignment="Left"
AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmittedAt_Text">
</TextBlock>
<TextBlock Text="qeqweq" FontSize="14" HorizontalAlignment="Left" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmittedBy_Text" />
<TextBlock Text="ertert" FontSize="16" HorizontalAlignment="Left" Margin="0,6,0,0" FontWeight="Bold" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchProgressed_Text">
</TextBlock>
<TextBlock Text="dsdfgfdg" FontSize="14" HorizontalAlignment="Left" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchProgressedAt_Text" >
</TextBlock>
<!-- Must be last item in the stack panel otherwise you get a vertical gap-->
<TextBlock Grid.Column="0" x:Name="characterLength" Text="abcdefg" HorizontalAlignment="Left" Visibility="Hidden" FontWeight="Bold" FontSize="14" />
</StackPanel>
<!--</ScrollViewer>-->
<!-- Button panel: Bottom -->
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_SetMarkerStandardised_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3"
AutomationProperties.AutomationId="DipIn_BatchReviewView_AllocateNextStandardisationBatch_Button" />
<!-- Content, Automation Id & Command is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" />
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_AutoProgressBatches_Button" />
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchListFilter_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_SubmitBatch_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_StartStop_Marker_Button">
<TextBlock FontSize="14" Text="a" />
</Button>
</StackPanel>
</DockPanel>
</Grid>
Avoid using ScrollViewer it will Avoid the Overlapping of the Content .
You could use a Grid with two RowDefinitions:
<DockPanel DockPanel.Dock="Left" LastChildFill="True" Width="{Binding ActualWidth, ElementName=characterLength}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Margin="6,0,0,0">
<StackPanel Orientation="Vertical" Margin="6,0,0,6" >
...
</StackPanel>
</ScrollViewer>
<StackPanel Grid.Row="1" Orientation="Vertical" VerticalAlignment="Bottom">
...
</StackPanel>
</Grid>
</DockPanel>
Related
I have a button like so:
<StackPanel Orientation="Vertical" Width="200">
<DockPanel LastChildFill="False">
<Grid Width="81" Background="Blue" DockPanel.Dock="Right" />
<Button Width="120" DockPanel.Dock="Left">
<Grid>
<TextBlock Text="Button" ></TextBlock>
<Canvas Margin="120,0,0,0" >
<TextBlock Text="I want to break free" />
</Canvas>
</Grid>
</Button>
</DockPanel>
</StackPanel>
In this case the canvas content will not get rendered and it's content won't be visible.
If I however change the Grid lengths from 81 to 80 it works.
It will also work in this scenario:
<Grid Width="200">
<Grid Width="81" Background="Blue" DockPanel.Dock="Right" HorizontalAlignment="Right" Grid.Column="1" />
<Button Width="120" HorizontalAlignment="Left">
<Grid>
<TextBlock Text="Button" ></TextBlock>
<Canvas Margin="120,0,0,0" >
<TextBlock Text="I want to break free" />
</Canvas>
</Grid>
</Button>
</Grid>
The Canvas will also work if not inside a button:
<StackPanel Orientation="Vertical" Width="200">
<DockPanel LastChildFill="False" Height="42">
<Grid Width="81" Background="Blue" DockPanel.Dock="Right" />
<Canvas Margin="120,0,0,0" >
<TextBlock Text="I want to break free" />
</Canvas>
</DockPanel>
</StackPanel>
Why is it behaving like that inside a button? How can be this fixed to the wanted behavior of showing the canvas?
Currently, I'm using a Grid of Buttons for housing keys for navigation. It's hideous, but gets the job done.
Here's the XAML chunk:
<Button x:Name="ShowMainMenu" Grid.Column="0" Margin="5" Content="Main Menu"/>
<Button x:Name="ShowReportsMenu" Grid.Column="2" Margin="5" Content="Reports"/>
<Button x:Name="Reset" Grid.Column="4" Margin="5" Content="Reset"/>
<Button x:Name="TryClose" Grid.Column="6" Margin="5" Content="Close"/>
Incidentally, I'm using Caliburn.micro, and so naming the buttons is enough to bind them to proper commands.
Now, I want them to put them in a Hamburger Menu.
What I have tried till now is this:
<Controls:HamburgerMenu >
<Controls:HamburgerMenu.ItemTemplate>
<DataTemplate DataType="{x:Type Controls:HamburgerMenuGlyphItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Glyph}" />
<TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Text="{Binding Label}" />
</Grid>
</DataTemplate>
</Controls:HamburgerMenu.ItemTemplate>
<Controls:HamburgerMenu.ItemsSource>
<Controls:HamburgerMenuItemCollection>
<Controls:HamburgerMenuGlyphItem Glyph="1" Label="Main Menu" cal:Message.Attach="[Event Click] = [Action ShowMainMenu]"/>
</Controls:HamburgerMenuItemCollection>
</Controls:HamburgerMenu.ItemsSource>
</Controls:HamburgerMenu>
But it doesn't work, because Controls:HamburgerMenuGlyphItem isn't a FrameworkElement.
By the way, the transitioning view is implemented like this:
So, how can I translate my bunch of Buttons into a HamburgerMenu? I can't find proper documentation for Caliburn.micro's HamburgerMenu as well.
Well, I figured it out myself.
Here's the code:
<DockPanel>
<DockPanel.Resources>
<DataTemplate x:Key="MenuItemTemplate">
<Grid Height="48" Background="Black">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<cal:ActionMessage MethodName="{Binding Tag}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe MDL2 Assets" Foreground="BlanchedAlmond" Text="{Binding Glyph}"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Foreground="White" Text="{Binding Label}"/>
</Grid>
</DataTemplate>
</DockPanel.Resources>
<Controls:HamburgerMenu Foreground="White" PaneBackground="#FF444444" IsPaneOpen="False" DisplayMode="CompactOverlay" OptionsItemTemplate="{StaticResource MenuItemTemplate}" ItemTemplate="{StaticResource MenuItemTemplate}">
<Controls:HamburgerMenu.ItemsSource>
<Controls:HamburgerMenuItemCollection>
<Controls:HamburgerMenuGlyphItem Glyph="M" Label="Main Menu" Tag="ShowMainMenu"/>
<Controls:HamburgerMenuGlyphItem Glyph="I" Label="Invoice" Tag="OpenInvoiceMaker"/>
<Controls:HamburgerMenuGlyphItem Glyph="R" Label="Reports" Tag="ShowReportsMenu"/>
</Controls:HamburgerMenuItemCollection>
</Controls:HamburgerMenu.ItemsSource>
<Controls:HamburgerMenu.OptionsItemsSource>
<Controls:HamburgerMenuItemCollection>
<Controls:HamburgerMenuGlyphItem Glyph="A" Label="About" Tag="About"/>
</Controls:HamburgerMenuItemCollection>
</Controls:HamburgerMenu.OptionsItemsSource>
<Controls:HamburgerMenu.Content>
<DockPanel>
<Border Background="#FF444444" DockPanel.Dock="Top">
<TextBlock x:Name="Header" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15" Foreground="White" Text="{Binding ActiveItem.DisplayName}" />
</Border>
<ScrollViewer Grid.Row="1" CanContentScroll="True" IsDeferredScrollingEnabled="False">
<Controls:TransitioningContentControl Transition="LeftReplace" x:Name="ActiveItem" Content="{Binding ActiveItem}"/>
</ScrollViewer>
</DockPanel>
</Controls:HamburgerMenu.Content>
</Controls:HamburgerMenu>
</DockPanel>
Basically, I used EventTrigger to achieve the same functionality as a button. The rest was easy.
I have a XAML window that the layout is done using a main grid. The problem is when the browser is resized the controls in the second and third columns move to the right and the window's layout is no longer correct. I have pasted the XAML below. I think the layout of a WPF window should be grid based with all controls residing in the window's master grid. Is this the proper layout design for WPF or is there a different recommended layout pattern?
<Window x:Class="MasterPage.Intake1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:v="clr-namespace:MasterPage.View"
Title="Intake 1" Height="900" Width="1000" Background="#FFD9DDE8" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="190*"/>
<RowDefinition Height="275*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500*"/>
<ColumnDefinition Width="300*"/>
<ColumnDefinition Width="250*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0">
<Image Source="Images\header.jpg" Height="47" Margin="0,0,0,0" />
</StackPanel>
<StackPanel HorizontalAlignment="Left" Grid.Column="0" Height="80" Width="350" Grid.ColumnSpan="1" Grid.Row="1" Margin="0,-23,0,0">
<Image Source="Images\DSPASS_logo.png" Stretch="Fill" DockPanel.Dock="Top" Height="70" />
</StackPanel>
<StackPanel Grid.Column="4" Grid.Row="1" Grid.ColumnSpan="1" Margin="0,0,0,0">
<TextBlock FontSize="15" Margin="0,0,0,0" Height="25" Width="300" TextWrapping="WrapWithOverflow">
<Label FontSize="10" Name="Namelabel" Width="250" FontWeight="Bold" Foreground="#1664A1" Content="Welcome to DS PASS:"/>
</TextBlock>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" Margin="10,10,0,0" Height="290" Width="975" VerticalAlignment="Top" Grid.ColumnSpan="3" Grid.RowSpan="1">
<Label Height="36" FontSize="16" Content="Post Identification" Background="#FF014E7E" FontWeight="Bold" Foreground="White" Margin="-5,0,-18,0"/>
<StackPanel x:Name="_wordLength" Orientation="Horizontal" Margin="235,0,200,0">
<TextBlock Height="20" x:Name="ApplicantType_TextBlock" Text="Applicant Type" Width="110" Margin="5" TextAlignment="Right"/>
<ComboBox Height="25" x:Name="textBoxWordLength" Width="400" Margin="10,5"/>
</StackPanel>
<StackPanel x:Name="_integerWordLength" Orientation="Horizontal" Margin="235,0,200,0">
<TextBlock Height="20" x:Name="textBlockIntegerWordLength" Text="Person Type" Width="110" Margin="5" TextAlignment="Right"/>
<ComboBox Height="25" x:Name="textBoxIntegerWordLength" Width="400" Margin="10,5"/>
</StackPanel>
<StackPanel x:Name="_Post" Orientation="Horizontal" Margin="235,0,200,20">
<TextBlock Height="20" x:Name="Post_TextBlock" Text="Post" Width="110" Margin="5" TextAlignment="Right"/>
<ComboBox Height="25" x:Name="Post_TextBox" Width="400" Margin="10,5"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" Height="130" Margin="15,-120,0,0" VerticalAlignment="Top" Grid.ColumnSpan="3" >
<Label Height="36" FontSize="16" Content="Applicant Employment" Background="#FF004A78" FontWeight="Bold" Foreground="White" Margin="-5,0,-18,0"/>
<StackPanel x:Name="_max1" Orientation="Vertical" Margin="1,0,355,0">
<TextBlock Height="20" x:Name="maxTextBlock1" Text="Employee ID" Width="100" Foreground="Black" Margin="0,15,459,5" TextAlignment="Right"/>
<TextBox Height="25" x:Name="maxTextBox1" Width="400" Margin="0,-5,90,25"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Left" Height="330" Margin="0,10,0,0" VerticalAlignment="Top" Width="965" Grid.RowSpan="2">
<Label Height="36" FontSize="16" Content="English Version of Name" Background="#FF005183" Grid.Row="4" FontWeight="Bold" Margin="10,10,0,0" Foreground="White" Padding="4,5,5,5"/>
<StackPanel x:Name="_LastName" Orientation="Vertical">
<TextBlock Height="20" x:Name="LastName_TextBlock" Text="Last Name/Surname" Margin="55,5,459,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="LastName_TextBox" Width="500" Margin="55,5,459,5"/>
</StackPanel>
<StackPanel x:Name="_FirstName" Orientation="Vertical">
<TextBlock Height="20" x:Name="FirstName_TextBlock" Text="First Name" Margin="55,0,459,0" TextAlignment="Left"/>
<TextBox Height="25" x:Name="FirstName_TextBox" Width="500" Margin="55,0,459,0"/>
</StackPanel>
<StackPanel x:Name="_MiddleName" Orientation="Vertical">
<TextBlock Height="20" x:Name="MiddleName_TextBlock" Text="Middle Name" Margin="55,5,459,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="MiddleName_TextBox" Width="500" Margin="55,5,459,5"/>
</StackPanel>
<StackPanel x:Name="_ExtendedName" Orientation="Vertical">
<TextBlock Height="20" x:Name="ExtendedName_TextBlock" Text="Extended name (Tribal, Jr., III, etc.)" Margin="55,5,372,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="Extended_TextBox" Width="500" Margin="55,5,459,5"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.RowSpan="4" Grid.Column="4" HorizontalAlignment="Left" Height="230" Margin="-250,400,0,0" Width="480" Grid.ColumnSpan="1">
<StackPanel x:Name="_Aliases" Orientation="Vertical" Margin="-15,0,0,0" Height="144">
<TextBlock Height="20" x:Name="Aliases_TextBlock" Text="Aliases" Margin="40,-5,0,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="Aliases_TextBox" Width="500" Margin="43,5"/>
<TextBox Height="25" x:Name="Aliases_TextBox1" Width="500" Margin="43,5"/>
<TextBox Height="25" x:Name="Aliases_TextBox2" Width="500" Margin="43,5"/>
</StackPanel>
</StackPanel>
<!--<Label HorizontalAlignment="Left" Margin="4,132,0,0" Grid.Row="3" VerticalAlignment="Top" Background="#FF72C772" Grid.ColumnSpan="3" Width="1242" Height="36"/>
<Button Content="Continue" Grid.Column="2" HorizontalAlignment="Left" Margin="16,139,0,0" Grid.Row="3" VerticalAlignment="Top" Width="125" Click="Page1_Continue_Click"/>
<Button Content="Save Draft" Grid.Column="1" HorizontalAlignment="Left" Margin="336,139,0,0" Grid.Row="3" VerticalAlignment="Top" Width="125"/>-->
<Label HorizontalAlignment="Left" Margin="4,400,0,0" Grid.Row="4" VerticalAlignment="Top" Background="#FF52BB52" Grid.ColumnSpan="3" Width="983" Height="36">
</Label>
<Button Content="Save Draft" Grid.Column="1" HorizontalAlignment="Left" Margin="150,408,0,0" Grid.Row="5" VerticalAlignment="Top" Width="125" />
<Button x:Name="ContinueButton_Page2" Content="Continue" Grid.Column="1" Width="125" Grid.Row="5" VerticalAlignment="Top" Margin="200,408,0,0" Grid.ColumnSpan="2" Click="btnContinue_Click"/>
</Grid>
</Window>
When you want control of the alignment during resizing, think Grid. In more complex situations, think Grids inside a Grid. A picture says it better
You have your MainGrid with only rows, no columns. The blue headers get rows of their own and
the orange containers are Grids themselves (with possibly a margin left and right).
Now you shouldn't try to divide the available space with all "...*" width values.
In this example you could use it for dead space only, e.g. the yellow columns with Width="*".
The blue columns would be Width="Auto" (or pixels).
Topping it off with a MinWidth for the Window corresponding with the width you need for the bottom Grid. Also consider wrapping your MainGrid in a ScrollViewer.
What I needed was to not allow resizing of the web browser. To do this I removed the minimize/maximize buttons To do that I used the following attribute:
ResizeMode="NoResize"
I've been working on how to do layouts and I've come across something that is bugging the heck out of me. Now, if I use the code below, the window takes up the entirety of my screen.
<Window x:Class="HDD_Drill_View.Windows.WndwMain"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="HDDC"
WindowStartupLocation="CenterScreen"
Name="wndwMain"
Closing="WindowClosing"
ResizeMode="NoResize"
WindowState="Normal"
SizeToContent="WidthAndHeight">
<Grid>
<DockPanel Width="Auto"
LastChildFill="False"
HorizontalAlignment="Left">
<DockPanel.Background>
<ImageBrush ImageSource="..\Resources\background.png"
Stretch="UniformToFill"
TileMode="None" />
</DockPanel.Background>
<StackPanel DockPanel.Dock="Top"
Height="Auto"
Width="Auto"
Orientation="Horizontal"
HorizontalAlignment="Center">
<Button HorizontalAlignment="Left"
Name="bttnGenerateReports"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnGenerateReportsClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text="Generate" /><LineBreak /><Run Text=" Reports" /></TextBlock>
</Button>
<Button HorizontalAlignment="Left"
Name="bttnSurveyReport"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnSurveyReportClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text="Survey" /><LineBreak /><Run Text="Report" /></TextBlock>
</Button>
<Button HorizontalAlignment="Left"
Name="bttnTimeChart"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnTimeChartClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text=" Time" /><LineBreak /><Run Text=" Chart" /></TextBlock>
</Button>
<Button HorizontalAlignment="Left"
Name="bttnMaterialAcquisition"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnMaterialAcquisitionClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text=" Material" /><LineBreak /><Run Text="Acquistion" /></TextBlock>
</Button>
</StackPanel>
<StackPanel DockPanel.Dock="Bottom"
Height="Auto"
Width="Auto"
Orientation="Horizontal">
<!--MaxWidth="800"
MaxHeight="80"-->
<StackPanel.Background>
<ImageBrush ImageSource="..\Resources\drildata2.jpg" />
</StackPanel.Background>
</StackPanel>
</DockPanel>
</Grid>
</Window>
Yet, if I uncomment the Max Height and Max Width in the last StackPanel, then it seems fine. Basically, I'm wanting my background image to NOT affect my window size. Is this possible? I'm trying to set the background of a StackPanel to an image.
Remove the SizeToContent="WidthAndHeight" from the Window.
I want to stretch the Groupbox of this window (height). I am not able to get it working. What am I doing wrong?
What I want is that the groupbox stretches to the height of the window, but that the first column doesn't stretch.
<!-- PLAYER A -->
<Border Grid.Row="0" Grid.Column="0" x:Name="PlayerA" Height="145" VerticalAlignment="Center">
<Grid Height="145" VerticalAlignment="Top">
<GroupBox x:Name="grpPlayerA" Header="Player A" Margin="10,14,0,0" RenderTransformOrigin="0.035,-0.717" Height="127" VerticalAlignment="Top">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Label x:Name="lblArtistA" Content="VENGABOYS" HorizontalAlignment="Left" Margin="3,3,0,0" VerticalAlignment="Top"/>
<Label x:Name="lblTitleA" Content="TO BRAZIL" HorizontalAlignment="Left" Margin="3,27,0,0" VerticalAlignment="Top"/>
<ProgressBar x:Name="prgPlayerA" HorizontalAlignment="Left" Height="15" Margin="5,53,0,0" VerticalAlignment="Top" Width="212"/>
<Image x:Name="imgPlayerA" HorizontalAlignment="Left" Height="62" Margin="220,6,0,0" VerticalAlignment="Top" Width="81"/>
<Button x:Name="btnPlayerAPlay" Content="Play" HorizontalAlignment="Left" Margin="5,79,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="btnPlayerAPauze" Content="Pauze" HorizontalAlignment="Left" Margin="92,79,0,0" VerticalAlignment="Top" Width="74"/>
<Button x:Name="btnPlayerAStop" Content="Stop" HorizontalAlignment="Left" Margin="178,79,0,0" VerticalAlignment="Top" Width="76"/>
</Grid>
</GroupBox>
</Grid>
</Border>
<!-- PLAYER B-->
<Border Grid.Row="0" Grid.Column="1" x:Name="PlayerB">
<GroupBox x:Name="grpPlayerB" Header="Player B" Margin="0,14,16,0" Height="127" VerticalAlignment="Top">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Label x:Name="lblArtistB" Content="VENGABOYS" HorizontalAlignment="Left" Margin="3,3,0,0" VerticalAlignment="Top"/>
<Label x:Name="lblTitleB" Content="TO BRAZIL" HorizontalAlignment="Left" Margin="3,27,0,0" VerticalAlignment="Top"/>
<ProgressBar x:Name="prgPlayerB" HorizontalAlignment="Left" Height="15" Margin="5,53,0,0" VerticalAlignment="Top" Width="212"/>
<Image x:Name="imgPlayerB" HorizontalAlignment="Left" Height="62" Margin="220,6,0,0" VerticalAlignment="Top" Width="81"/>
<Button x:Name="btnPlayerBPlay" Content="Play" HorizontalAlignment="Left" Margin="5,79,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="btnPlayerBPauze" Content="Pauze" HorizontalAlignment="Left" Margin="92,79,0,0" VerticalAlignment="Top" Width="74"/>
<Button x:Name="btnPlayerBStop" Content="Stop" HorizontalAlignment="Left" Margin="178,79,0,0" VerticalAlignment="Top" Width="76"/>
</Grid>
</GroupBox>
</Border>
<!-- HITLIJST -->
<Border Grid.Row="1" Grid.Column="0" x:Name="Hitlijst" VerticalAlignment="Top" Margin="0,0,0,28">
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="0*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<GroupBox x:Name="grpPlaylist" Header="Hitlijst" Margin="10,0" Grid.RowSpan="2" Height="275">
<Grid VerticalAlignment="Top">
<ListBox x:Name="lbxHitlijst" Height="242" Margin="10,10,10,0" VerticalAlignment="Top">
<ListBoxItem Background="#FFF55F19" Content="1. Vengaboys - To Brazil (3:19)"/>
<ListBoxItem Background="#FFF91A1A" Content="2. Total Touch - Doo Be La Dee (3:60)"/>
<ListBoxItem Content="3. ATB - 9 PM Till I Come (3:33)"/>
</ListBox>
</Grid>
</GroupBox>
</Grid>
</Border>
<Border Grid.Row="1" Grid.Column="1" x:Name="Info">
<Grid>
<GroupBox x:Name="grpInfo" Header="Info" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Height="282" Width="324">
<Grid>
<TextBlock x:Name="txtLyrics" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Lyrics" VerticalAlignment="Top" Height="119" Width="292"/>
<GroupBox x:Name="grpInfoInfo" Header="Gegevens" HorizontalAlignment="Left" Margin="10,134,0,0" VerticalAlignment="Top" Height="116" Width="292">
<Grid>
<Label x:Name="lblAlbum" Content="ALBUM: Hitzone 1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.149,0.231"/>
<Label x:Name="lblYear" Content="JAAR: 1992" HorizontalAlignment="Left" Margin="10,36,0,0" VerticalAlignment="Top" RenderTransformOrigin="0,0.269"/>
<Label x:Name="lblArtists" Content="ARTIEST(EN): Vengaboys" HorizontalAlignment="Left" Margin="10,62,0,0" VerticalAlignment="Top"/>
</Grid>
</GroupBox>
</Grid>
</GroupBox>
</Grid>
</Border>
<GroupBox x:Name="grpHitlijst" Header="Hitlijst --" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="0,0,10,10"/>
</Grid>
It would be great to get it working, thanks in advance!
If you want the GroupBox to stretch in height, why is your VerticalAlignment Top? Switch it to Stretch and it should work.
Please refer to this note:
WPF Groupbox height needs to change dynamically?
bottom line - set width and height to "Auto" (delete the values that they have),
and set the VerticalAlignment / Horizontal one if you need it too to "Stretch"