I've came across a problem where I'm trying to make a side bar in WPF. I've made the grid area for it and it seems to exist however when I try to put a label on it the label seems to be hidden behind the grid. I tried using z-index to no prevail however if I use a margin to move the text to the top of the form then it appears.
Red - The top of the form and where the form name is. (This is how the top is supposed to look
Orange - The left size is where the side bar is meant to be and the right is where messages will be shown.
Grey - By using a margin and moving the text up you can see that is displayed at the top where the name of the form
should be.
This is **not** how its supposed and should be where the
yellow is however it shows that if anything goes where the yellow is then
it is covered by the gray area as if it has a higher z-index.
My xaml is bellow
<Window x:Class="CrackleChat.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:CrackleChat" xmlns:viewmodel="clr-namespace:CrackleChat.MVVM.ViewModel"
mc:Ignorable="d"
Height="650" Width="1200" Icon="/Icon.png"
Background="#36393F"
WindowStyle="None"
AllowsTransparency="True"
ResizeMode="CanResizeWithGrip">
<Window.DataContext>
<viewmodel:MainViewModel></viewmodel:MainViewModel>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25">
</RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="🗕" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="🗖" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="╳" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136">
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
</Window>
For your second subgrid add this: Grid.Row = "1" Otherwise both grids are in the same row (0 based index applies here)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/> <!--This is your second row-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="🗕" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="🗖" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="╳" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136" Grid.Row="1"> <!--This goes to the second row-->
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
Edit: added modified code for better explanation.
Related
I'm trying to create some bar charts from DotNetProjects.Wpf.Toolkit that display some data totals, though the data can change at run time. The problem is that I cannot get the chart to fit the size of the content - I always have to provide a fixed value (and setting Height="Auto" doesn't work), but I don't know what the size will need to be while running. What can I do to make my chart fit the content rather than the other way around?
My XAML code looks like this:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Movie_Vault"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Layout.Toolkit" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="Movie_Vault.frmStatistics"
mc:Ignorable="d"
Title="frmStatistics" Style="{StaticResource RoundedFormStyle}" WindowStartupLocation="CenterOwner">
<Border Style="{StaticResource WindowBorderStyle}">
<DockPanel x:Name="OuterPanel" >
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Top">
<DockPanel x:Name="TopPanel" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Image Height="16" Margin="8,4,8,4" Source="Images/process.png"/>
<TextBlock Style="{StaticResource MediumFont}"><Run Text="Statistics"/></TextBlock>
<DockPanel DockPanel.Dock="Right" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button x:Name="btnClose" Content="X" Style="{StaticResource MicroButtonStyle}" Margin="0,0,8,0" Click="btnClose_Click"/>
</DockPanel>
</DockPanel>
</Border>
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Left" Margin="0,8,0,0">
<DockPanel VerticalAlignment="Top" >
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="400" Width="500">
<Grid Name="panelTopGenres">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<toolkit:Chart Name="chartTopGenres" Title="Top Genres" VerticalAlignment="Top"
Margin="16,16,16,8" Padding="8" Background="White" >
<toolkit:BarSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False" Background="White"/>
</toolkit:Chart>
<Button Grid.Row="1" x:Name="btnTopGenresToggle" Style="{StaticResource SmallButtonStyle}"
Content="Show All Genres" Width="120"
Margin="16,0,4,4" HorizontalAlignment="Left" Click="btnToggle_Click" />
</Grid>
</ScrollViewer>
</DockPanel>
</Border>
</DockPanel>
</Border>
</Window>
What can I do to make my chart fit the content rather than the other way around?
Get rid of any StackPanels:
<Grid Name="panelTopGenres">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<toolkit:Chart Name="chartTopGenres" Title="Top Genres" VerticalAlignment="Top"
Margin="16,16,16,8" Padding="8" Background="White" >
<toolkit:BarSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False" Background="White"/>
</toolkit:Chart>
<Button Grid.Row="1" x:Name="btnTopGenresToggle" Style="{StaticResource SmallButtonStyle}"
Content="Show All Genres" Width="120"
Margin="16,0,4,4" HorizontalAlignment="Left" Click="btnToggle_Click" />
</Grid>
A StackPanel doesn't resize its children.
I try to align the TextBlocks to the left.
The button should take the rest of the area (Up to the picture).
How can I do this?
This is a UWP / C# App.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Center" HorizontalAlignment="Left">
<Button Background="Transparent" HorizontalAlignment="Stretch">
<StackPanel HorizontalAlignment="Left">
<TextBlock x:Name="TextBlock1" TextWrapping="Wrap" Text="Name1"/>
<TextBlock x:Name="TextBlock2" TextWrapping="Wrap" Text="Name2" />
</StackPanel>
</Button>
</Grid>
<StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right">
<Button Height="50" Width="50" Background="Transparent" Click="Button_Click">
<Image x:Name="ImageFavorit" Source="/Assets/Stern/VGrau64.png"/>
</Button>
</StackPanel>
</Grid>
Firstly you should replace your ColumnDefinitions to this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
And secondly remove HorizontalAlignment="Left" from your Grid then you can achieve to what you want:
<Grid VerticalAlignment="Center">
<Button Background="Transparent" HorizontalAlignment="Stretch">
...
Also it seems that you need to set VerticalAlignment="Center" of your StackPanel too:
<StackPanel Grid.Column="1" Grid.Row="0"
HorizontalAlignment="Right" VerticalAlignment="Center">
Update: Based on your comment that you want the text on the left side Set the HorizontalContentAlignment="Left" of the Button:
<Button Background="Transparent" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left">
I want to link an external .xaml file into a grid in my Universal Windows Platform App.
This is the folder structure:
I want to link ListView.xaml into a grid which is declared inside MainPage.xaml
Codes for both file :
MainPage.xaml:
<Page
x:Class="TodoGrocery.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TodoGrocery"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="gridView" Grid.Row="0" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Top" Height="40" Background="#3A5194">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" BorderThickness="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="Back" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
<TextBlock x:Name="title" Grid.Column="1" HorizontalAlignment="Center" FontSize="20" VerticalAlignment="Center" Foreground="White" Text="Todo Grocery"></TextBlock>
<Button x:Name="moreButton" BorderThickness="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="More" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
</Grid>
<Grid Grid.Row="1">
<Page><!-- Link ListView.xaml Here--></Page>
</Grid>
</Grid>
</Page>
ListView.xaml
<Page
x:Class="TodoGrocery.ListView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TodoGrocery"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid x:Name="listHeader" Grid.Row="0" BorderBrush="#d0d0d0" BorderThickness="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" IsChecked="True"></CheckBox>
<TextBlock Grid.Column="1" Text="Name" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,9,0,9"></TextBlock>
</Grid>
<Button Grid.Column="1">
<SymbolIcon Symbol="Sort"/>
</Button>
<TextBlock Grid.Column="2" Text="Quantity" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"></TextBlock>
</Grid>
<Grid x:Name="ListPanel" Grid.Row="1"></Grid>
<Grid x:Name="ButtonPanel" Grid.Row="2" Background="#3A5194">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button x:Name="deleteAllButton" BorderThickness="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="White" Background="Transparent">
<!--<SymbolIcon Symbol="Delete" Foreground="White"/>-->
<StackPanel Orientation="Horizontal" Height="30">
<SymbolIcon Symbol="Delete" Foreground="White"/>
<TextBlock VerticalAlignment="Center" Foreground="White" Margin="10,0,0,0">Delete All</TextBlock>
</StackPanel>
</Button>
<Button x:Name="addButton" Grid.Column="1" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="White" Background="Transparent">
<!--<SymbolIcon Symbol="Delete" Foreground="White"/>-->
<StackPanel Orientation="Horizontal" Height="30" Width="100">
<SymbolIcon Symbol="Add" Foreground="white"/>
<TextBlock VerticalAlignment="Top" Foreground="White" HorizontalAlignment="Right" Margin="15,5,0,0">Add</TextBlock>
</StackPanel>
</Button>
</Grid>
</Grid>
</Page>
So this is what I'm planning to do with my app :
I will be having different external pages like ListView.xaml and whenever user clicks a link or a tab, the part where the page is linked should be changed with the page that has been asked for.
Thanks. Any other ideas are also appreciated.
To include a Page inside of another, use the Frame object:
<Grid Grid.Row="1">
<Frame x:Name="MainFrame"></Frame>
</Grid>
Then, to load a page inside of the Frame, just call the Navigate method:
this.MainFrame.Navigate(typeof(TodoGrocery.ListView));
As Kory said, you can know how to do what you want in UWP by reading Navigation chapter in How-to guides for Windows 10 apps.
The key point here is using Frame and Frame.Navigate methods. The frame hosts the pages and keeps the navigation history.
You create as many different page types as needed to present the content in your app, and then navigate to those pages by calling the Navigate method and passing in the type of the page to navigate to. You can also pass in a parameter object to initialize the page to a particular state.
So you can change your MainPage.xaml like following to link ListView.xaml:
<Page x:Class="TodoGrocery.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:TodoGrocery"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="gridView" Grid.Row="0" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Top" Height="40" Background="#3A5194">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" BorderThickness="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="Back" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
<TextBlock x:Name="title" Grid.Column="1" HorizontalAlignment="Center" FontSize="20" VerticalAlignment="Center" Foreground="White" Text="Todo Grocery"></TextBlock>
<Button x:Name="moreButton" BorderThickness="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="More" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
</Grid>
<Grid Grid.Row="1">
<Frame x:Name="MyFrame">
<local:ListView />
</Frame>
</Grid>
</Grid>
</Page>
Or just add a Frame in Grid:
<Grid Grid.Row="1">
<Frame x:Name="MyFrame" />
</Grid>
And in code-behind, using
MyFrame.Navigate(typeof(TodoGrocery.ListView));
I want to make the page inside the frame to adjust it's size automatically whenever I resize the main window.
First, I used only stack panels in designing the page, then I put them inside the cells of the grid but it didn't work.
Main window xmal:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication3"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="1200">
<Grid Name="gridUI">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="207*"/>
<ColumnDefinition Width="122*"/>
<ColumnDefinition Width="85*"/>
<ColumnDefinition Width="35*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Label Background="AliceBlue" FontSize="8" HorizontalAlignment="Left" Name="doc" Margin="0,0,0,26.333" Grid.RowSpan="2">Documents</Label>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1" Margin="4.667,0.333,121.565,0.333" Grid.ColumnSpan="2">
<Button Click="NewSample_Click">New Sample</Button>
<Button Click="CreateReport_Click">Create Report</Button>
</StackPanel>
<Button Grid.Row="1" Grid.Column="4" Margin="0,0.333,-0.334,0.333">Settting</Button>
<StackPanel Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Name="sp_doc" Margin="0,0.333,0.333,-0.333">
<StackPanel Orientation="Horizontal" >
<Button x:Name="sss" Click="sampleDropDown">s</Button>
<Label FontSize="12" Name="sam">Samples</Label>
</StackPanel>
<StackPanel Orientation="Vertical" Name="sp_s">
</StackPanel>
<StackPanel Orientation="Horizontal" >
<Button Click="reportDropDown">r</Button>
<Label>Reports</Label>
</StackPanel>
<StackPanel Orientation="Vertical" Name="sp_r">
</StackPanel>
</StackPanel>
<Frame x:Name="newSampleFrame" Grid.ColumnSpan="3" Content="" Grid.Column="1" HorizontalAlignment="center" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="center" Width="934" Height="456" NavigationUIVisibility="Hidden"/>
</Grid>
Page xmal :
<Page x:Class="WpfApplication3.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApplication3"
mc:Ignorable="d"
d:DesignHeight="456" d:DesignWidth="934"
Title="Page1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<Border BorderBrush="Black" BorderThickness="0.5" Margin="5">-->
<StackPanel Margin="60" Grid.Row="0" Grid.Column="0" >
<StackPanel Orientation="horizontal" Margin="5">
<Label Margin="0,0,100,0">Length</Label>
<TextBox Width ="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,105,0">Width</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,99,0">Weight</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,116,0">Age</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,71,0">Casting Date</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,73,0">Testing Date</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,21,0">Concrete Temperature</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin ="0,0,91,0">Field No.</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
</StackPanel>
<StackPanel Height="30" Width="120" Grid.Row="1" Grid.Column="1" Orientation="Horizontal" Margin="5">
<Button Width="50" Margin="0,0,10,0">Save</Button>
<Button Width="50">Cancel</Button>
</StackPanel>
<!--</Border>-->
</Grid>
For page "WpfApplication3.Page1" remove the
d:DesignHeight="456" d:DesignWidth="934"
and add Height="Auto" and Width="Auto". This will work
You could use a DockPanel as the outer contianer with LastChildFill set to full.
<DockPanel LastChildFill="True">
<Button Content="LastChildFill=True"/>
</DockPanel>
You would replace Button with the control that you want to fill the panel. An added bonus is that you can set other controls to dock on the other sides
<DockPanel LastChildFill="True">
<Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
<Button Content="Dock=Left"/>
<Button Content="Dock=Right" DockPanel.Dock="Right"/>
<Button Content="LastChildFill=True"/>
</DockPanel>
I got those examples from here and there's more info: http://www.wpftutorial.net/DockPanel.html
Here is my code. I have tried several things to get the label in the top right hand corner of the popup and make it stay there, but nothing has worked.
Thanks for your help!
XAML:
<Window x:Class="ValidationWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:local="clr-namespace:ValidationWPF"
Title="MainWindow" mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="259" d:DesignWidth="420" SizeToContent="WidthAndHeight">
<Grid Height="129" Width="345">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="514*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="251*" />
</Grid.RowDefinitions>
<Button Content="Errors" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="75" Grid.Column="1" Grid.Row="1" Margin="132,12,0,0" MouseEnter="button1_MouseHover">
</Button>
<Popup AllowsTransparency="True" PlacementTarget="{Binding ElementName=button1}" StaysOpen="True" AllowDrop="True" Name="PopUp1" PopupAnimation="Scroll">
<Popup.Child>
<Border BorderBrush="White" BorderThickness="3, 3, 0, 0">
<Border BorderBrush="Black" BorderThickness="3, 3, 3, 3">
<TextBlock Background="Salmon">
<Label Background="AliceBlue" Foreground="Black" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" MouseDown="mouse_DownHandeled" AllowDrop="False" Margin="100,100,0,0">
x
</Label>
<local:ValidationUserControl/>
</TextBlock>
</Border>
</Border>
</Popup.Child>
</Popup>
</Grid>
</Window>
As you see, I have a popup with a label that has an X in it. The label is fully functional. Now I just need it to look like a normal popup with the label in the top right hand corner.
Try this:
<TextBlock Background="Salmon" MinWidth="150" MinHeight="150" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="1" Background="AliceBlue" Foreground="Black" VerticalAlignment="Top" AllowDrop="False">
X
</Label>
</Grid>
</TextBlock>