I think my title is a bit confusing so let me explain my question in detail.
I have a StackPanel with multiple Grids inside it. It basicly looks like a table with a "Header Grid" and a "Content Grid" below. The StackPanel itself is inside a ScrollViewer.
Whenever the user clicks on the "Header Grid" the corresponding "Content Grid" should be collapsed and visible vice versa.
Here is a short version of my table:
<ScrollViewer Margin="0,0,0,10">
<StackPanel>
<Grid x:Name="Header_Grid1" Height="24" Background="#BF101820" VerticalAlignment="Top" Margin="34,0,0,0" Cursor="Hand" >
<Label Content="Click me to show/hide Content_Grid1" Padding="5,0" VerticalContentAlignment="Center" Margin="5,0,0,0" Grid.ColumnSpan="2" Width="982"/>
</Grid>
<Grid x:Name="Content_Grid1" Height="100" Width="967" HorizontalAlignment="Right" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5">
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,0,719,75"/>
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,25,719,50"/>
</Grid>
<Grid x:Name="Header_Grid2" Height="24" Background="#BF101820" Width="1001" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,0,0">
<Label Content="Click me to show/hide Content_Grid2" Padding="5,0" VerticalContentAlignment="Center" Margin="5,0,0,0" Grid.ColumnSpan="2" Width="982"/>
</Grid>
<Grid x:Name="Content_Grid2" Height="100" Width="967" HorizontalAlignment="Right" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5">
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,0,719,75"/>
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,25,719,50"/>
</Grid>
</StackPanel>
</ScrollViewer >
Lets say the user clicks on "Header_Grid1" the "Content_Grid1" hides with an kinda "flow to the top" animation by reducing its size. Thats no problem at all - the thing is I´d like the "Header_Grid2" aswell as the "Content_Grid2" to flow to the top while the animation of hiding "Content_Grid1" is playing. "Header_Grid2" and "Content_Grid2" should not just pop to the place where "Content_Grid1" has been. It should rather happen in a smooth animation.
Hopefully someone understands what I mean. It´s pretty hard to explain...
Thanks
As far as I am aware you can't animate the collapsed method, but there are various tricks to get around that such as animating the opacity, size, location etc...
Related
I'm just new and messing around with the WPF C#.
I noticed that the design view and have some minor differences. Most noticeable at the button.
Design View:
Ouput # 1:
Ouput # 2:
It seems that the window/container is resizing/shrinking even when both min and max width's and height's were set with fixed values and resize mode is set to NoResize.
I could easily deal with some of the controls by setting up the vertical and horizontal alignments since the adjustments are not too noticeable, but for the Add button the differences are noticeable from the supposed output.
I did try setting the min size of the button so that it would not be affected by the resizing and there would still be space for the margins but the button properly renders only a part of it. (please see output 1)
The only compromise that I could is to set both vertical and horizontal alignment to stretch and not put any size constraints on the button but the button would end up shrinking from its original size. (please see output 2)
Here's the XAML for the window.
<Window x:Class="Game_Viewer.NewApp"
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:Game_Viewer"
mc:Ignorable="d"
Title="Add New Program" Height="155" Width="250" ResizeMode="NoResize" Background="#FF515151" WindowStyle="ToolWindow" WindowStartupLocation="CenterScreen" MinHeight="155" MinWidth="250">
<Grid Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Image x:Name="appicon_img" Margin="10,10,0,0" Source="Resources/menu_bg.png" Stretch="Fill" Height="35" VerticalAlignment="Top" HorizontalAlignment="Left" Width="35" Grid.ColumnSpan="2"/>
<TextBox x:Name="apppath_txtbox" HorizontalAlignment="Left" Margin="10,55,0,0" Width="154" Foreground="White" Background="#FF6E6E6E" Text="Program Path" VerticalContentAlignment="Center" BorderBrush="#FF707070" MaxLines="1" Height="25" VerticalAlignment="Top" FontSize="10" Grid.ColumnSpan="2"/>
<Button Content="Search" Margin="169,55,10,0" Click="BrowseApp_Click" Foreground="White" Background="#FF515151" FontWeight="Medium" Height="25" VerticalAlignment="Top" FontSize="10" Grid.ColumnSpan="2"/>
<Button x:Name="add_btn" Content="Add Program" Margin="72,89,72,8" Foreground="White" Background="#FF515151" Click="AddProgram_Click" FontWeight="Medium" Grid.ColumnSpan="2" MinHeight="30" MinWidth="100"/>
<TextBox x:Name="appname_txtbox" Margin="50,10,10,0" TextWrapping="WrapWithOverflow" Foreground="White" Text="Program Name" MaxLines="1" IsUndoEnabled="True" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="#FF707070" FontWeight="Medium" Background="#FF6E6E6E" Height="35" VerticalAlignment="Top" Grid.ColumnSpan="2"/>
</Grid>
</Window>
I would like to know a solution or round-about for this kind of issue.
It's not really a problem having this issue as it is only aesthetic but I would at least know the reason why this is happening. And could you refer me to good tutorials for wpf using c#.
Thanks in advance and have a wonderful day!
I have this button and I put some text in it using Content="1", there's a 15px padding around the top and 20px on the left side of the number, however the text appears to go outside of the button when it is resized.
this is what it normally is
and this is what happens when it resizes
if it helps any, here is the XAML code:
<Button x:Name="_btn1" Content="1" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center" Width="214" FontSize="24" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" Height="182" Margin="10,10,10,10" Background="#33999999" Click="DayClick" Padding="20,15,0,0"/>
Your content is not going outside; some portion of the button is hiding behind the content holder like StackPanel, Grid or whatever you are using.
Here are something you can do -
Use button's auto size instead of hard code size.
<Button x:Name="_btn1"
Content="1"
FontSize="24"
Background="SeaGreen"
Margin="10,10,10,10"
Grid.Row="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
Use ScrollViwer outside of your container.
<ScrollViewer>
<StackPanel>
<Button x:Name="_btn1"
Content="1"
FontSize="24"
Background="SeaGreen"
Width="214"
Height="182"
Padding="20,15,0,0"
Margin="10,10,10,10"
Grid.Row="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Top"/>
</StackPanel>
</ScrollViewer>
You can't use ScrollViwer inside of a StackPanel
Use AdaptiveTrigger and change the buttons' properties as you need.
(Read the doc if you are not familiar - AdaptiveTrigger)
I am new to WPF,and have written a simple hello world type application in order to get started. The code I have so far is shown below:
WPF XAXML
<Window x:Name="wndMain" x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ews="clr-namespace:ExtraWindowStyles"
ResizeMode="NoResize"
ews:ExtraWindowStyles.CanMinimize="false"
ews:ExtraWindowStyles.CanMaximize="false"
Title="Hello World" Height="501.492" Width="842.285">
<Grid>
<GroupBox Header="Input Parameters" HorizontalAlignment="Left" Height="173" Margin="10,25,0,0" VerticalAlignment="Top" Width="801" >
<StackPanel Orientation="Horizontal" Margin="0,0,96,0">
<StackPanel Margin="10">
<Label FontWeight="Bold">First Group</Label>
<RadioButton x:Name="opt11">Option 1 - 1</RadioButton>
<RadioButton x:Name="opt12">Option 1 - 2</RadioButton>
<RadioButton x:Name="opt13">Option 1 - 3</RadioButton>
</StackPanel>
<StackPanel Margin="10">
<Label FontWeight="Bold" Content="Second Group"/>
<RadioButton x:Name="opt21" Content="Option 2 - 1"/>
<RadioButton x:Name="opt22" Content="Option 2 - 2"/>
<RadioButton x:Name="opt23" Content="Option 2 - 3"/>
</StackPanel>
</StackPanel>
</GroupBox>
<Separator HorizontalAlignment="Left" Height="80" Margin="17,203,0,0" VerticalAlignment="Top" Width="794"/>
<Button x:Name="btnSubmit" Content="Submit" HorizontalAlignment="Left" Height="34" Margin="632,203,0,0" VerticalAlignment="Top" Width="179" Click="btnExplore_Click" />
<Label Content="Results:" HorizontalAlignment="Left" Height="28" Margin="10,242,0,0" VerticalAlignment="Top" Width="161"/>
<Label Content="My App" HorizontalAlignment="Left" Height="23" Margin="696,439,0,0" VerticalAlignment="Top" Width="130" FontSize="9"/>
<TextBlock>
<Hyperlink NavigateUri="http://www.google.com" RequestNavigate="Hyperlink_RequestNavigate">
Click Here
</Hyperlink>
</TextBlock>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="162" Margin="17,270,0,0" Stroke="Black" VerticalAlignment="Top" Width="794"/>
<Label x:Name="lblResult" Content="" HorizontalAlignment="Left" Height="157" Margin="17,275,0,0" VerticalAlignment="Top" Width="794"/>
</Grid>
</Window>
Code Behind..
private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
{
Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
e.Handled = true;
}
If I comment out the Hyperlink control XAML (and its related backend code), I am able to select options, click the Submit button etc.
However, if I uncomment the Hyperlink control (and its associated backend code), The only thing that remains clickable, is the Url on the form - what's going on?
Just position your TextBlock and it won't take all space in the window and cover everything :
<TextBlock Width="100" Height="30">
<Hyperlink Background="Red" NavigateUri="http://www.google.com" >
Click Here
</Hyperlink>
</TextBlock>
Because the TextBlock is after submit button in XAML it is over.
You could also set Margin to position the TextBlock
Layout knowledge
Elements in a grid Stretch Horizontally and Vertically if no alignment is set.
Useful tip : If you click on the TextBlock tag, you'll see the extent of the TextBlock in the design view.
Often useful
I am trying to create buttons for a 10-foot GUI using WPF. Each button requires a little more data than just a single text string and an image, maybe 2-3 strings located in different positions and some imagery.
I have tried
<Button Height="52" HorizontalAlignment="Stretch" Name="button1" Width="407">
<Button.Content>
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch">
<TextBlock Name="textBloczk2" Text="ABC" TextAlignment="Left" DockPanel.Dock="Left"/>
<TextBlock Name="textBlxock1" Text="CDE" TextAlignment="Right" DockPanel.Dock="Right"/>
</DockPanel>
</Button.Content>
</Button>
But no matter which inner container I use, the button seems to disregard the layout from the DockPanel and the combined text ends up in the middle of the button. Am I doing something wrong or should I be using a different outer container ?
The problem seems to be that the DockPanel's width is so small that the Right and Left panels are the same width as your TextBlocks.
This seems to work as expected (setting the width of the DockPanel):
<Button Height="52" HorizontalAlignment="Stretch" Name="button1" Width="407">
<Button.Content>
<DockPanel LastChildFill="True" Width="300">
<TextBlock Name="textBloczk1" Text="Left" DockPanel.Dock="Left" />
<TextBlock Name="textBlxock2" Text="Right" DockPanel.Dock="Right" />
<TextBlock Name="textBlxock3" Text="Top" DockPanel.Dock="Top" />
<TextBlock Name="textBlxock4" Text="Bottom" DockPanel.Dock="Bottom" />
</DockPanel>
</Button.Content>
</Button>
Try to add "HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" to your button. This way dockpanel will occupy all space inside the button.
I have a bunch (currently) HyperlinkButtons on my main web page. I want to have 2 versions for the image of each button: selected and unselected. This way when the users enters a page the corresponding button will change to the "selected" image.
Here is an image of what I want to accomplish:
This seems to me like something trivial, but so far I have been running into a stone wall.
I would prefer to do everything from the XAML (but I will be grateful for any solution).
Here is a little of my XAML:
<ScrollViewer x:Name="NavScrollViewer" Margin="-5,12,5,-12" ScrollViewer.VerticalScrollBarVisibility="Visible" IsEnabled="True"
Style="{StaticResource ContentViewerStyle}">
<StackPanel x:Name="ToolboxPanel" Orientation="Vertical" d:LayoutOverrides="Width" Height="Auto">
<HyperlinkButton x:Name="DashboardButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/Dashboard"
Height="50"
/>
<TextBlock Text="Dashboard" HorizontalAlignment="Center" Height="20" Style="{StaticResource ComponentNameStyle}"/>
<HyperlinkButton x:Name="ConfigurationButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/CRSConfiguration"
Height="50"
/>
<TextBlock Text="Configuration" HorizontalAlignment="Center" Height="20" Style="{StaticResource ComponentNameStyle}"/>
<HyperlinkButton x:Name="ScanEnginestionButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/ScanEngines"
Height="50"
/>...
You need to have a toggle button and set its IsChecked property to toggle among its visual states. You may go through this post Using Toggle Button