I'm trying to put a status bar on the bottom of my window that uses the same color scheme as the title bar. I know the piece I'm missing is style inheritance and/or template setting, but I've been reading for hours and I can't figure it out.
Here's how my window currently looks:
Here's how it looks in the designer:
What I want:
A status bar at the bottom of the window that mirrors the style of the titlebar. I recognize that my current implementation is probably less than great, so I'm also open to changing my statusbar defintiion as seen below. I tried to use an actual statusbar, but it wouldn't behave the way I wanted (the textboxes wouldn't fill the empty space, so the command line input textbox was very hard to click - maybe I was just doing something wrong). I'm assuming I can also apply the style to a rectangle just like anything else, right? I'm missing a critical component with the style property and probably the user of a template or a staticresource, but I'm totally lost.
Here's my current solution (a label and two textboxes for status updates and a cmdline):
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0"/>
<TextBox Grid.Row="0" Grid.Column="1"/>
</Grid>
</Grid>
I solved this by using the AccentColorBrush resource in my status bar grid.
<Grid Grid.Row="1" Background="{DynamicResource AccentColorBrush}">
I found it by inspecting many XAML files in MahApps.Metro on GitHub. This may seem obvious to some people, but for someone who is trying to learn XAML/WPF/MVVM, this wasn't straight forward. I hope this helps someone as I struggled with it for quite a while.
Related
This question already has answers here:
How to make scrollviewer work with Height set to Auto in WPF?
(5 answers)
Closed 2 years ago.
I have got a little problem that I am unable to fix. The problem is that when I initialise scrollbar, it does not stay only in screen. To be more specific, its height is actually set to "auto", I think, because it does not let me scroll and it goes to infinite. On the other hand, when I set height to "500" it lets me scroll through it and everything works fine.
Main window:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--
<Frame x:Name="MainFrame" Grid.Row ="1" Grid.Column="1" Content="{Binding CurrPage}" Source="../pages/test_page.xaml" />
-->
<Grid Height="500">
<local:MessageList>
<local:ChatListControl VerticalAlignment="Top">
</local:ChatListControl>
</local:MessageList>
</Grid>
</Grid>
Chat list Control (the place where scrollbar is):
<Grid DataContext="{x:Static local:ChatsDesignModule.Instance}" Background="White">
<ScrollViewer VerticalScrollBarVisibility="Visible">
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:OneMessageTMP />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
Is there a way how can I bind in the first window the current size just by binding it to something already pre-existing or I have to somehow get the current max value and then set it using that one ?
Thanks in advance. If you have any question on the code, please let me know, I will explain / provide more code if needed :)
set Height="Auto" to Height="*". Height="Auto" will give the content of the grid row as much space as it wants. Thus the scroll viewer has nothing to scroll on.
I've recently been updating a WPF application that I worked on last year, and during testing, I noticed that one of the views looked a bit off. After installing the release version on my computer, it looks like the Submit button on one of the views appears in what is supposed to be a blank space, but beside the real submit button. The image below shows what I'm talking about.
The Submit button on the left and the Cancel button on the right both appear and work normally, but the Submit button in the middle just appears there. It doesn't highlight when hovered or do anything when clicked. My code for this section is below.
<Grid Grid.Row="2" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Name="SubmitButton"
Grid.Column="0"
Grid.Row="1"
FontSize="30"
Foreground="#DC0034"
FontWeight="DemiBold"
Click="SubmitInfo">SUBMIT</Button>
<Button Name="RestartButton"
Grid.Column="2"
Grid.Row="1"
FontSize="30"
Foreground="#DC0034"
FontWeight="DemiBold"
Click="ResetForm">CANCEL</Button>
</Grid>
I tried adding a blank Grid in the area that the extra Submit button is showing, but it still appears. I didn't have this issue the last time I worked on the project and I didn't edit any of the views, just backend stuff.
Any help is greatly appreciated.
I actually figured it out and it was really dumb on my part. The background of the view is an image and the person that designed it added a submit button to the image itself. So the "ghost" submit button that I was seeing was actually part of the background image. Thank you for the helpful comments though!
t may be a basic question. But I can't figure it out after several hours research.
I have an item detail page. I want to add another grid in it whenever the scrollview reaches the right bottom. Right now I partially achieved this goal by adding a column in the xaml and toggle its visibility property.
<Grid x:Name="body" Style="{StaticResource LayoutRootStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid x:Name="dynamicGrid" Grid.Column="1" Grid.RowSpan="2" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="360"/>
<RowDefinition Height="360"/>
</Grid.RowDefinitions>
<TextBlock .../>
<GridView .../>
<GridView .../>
</Grid>
And in code behind
if (//Reach the right side)
{
if (related.Visibility == Visibility.Collapsed)
{
related.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
}
if (// Move away from right border)
{
related.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}
It works to some point. But the animation is jumpy. Sometime, the scrollviewer even refuse to go back to the beginning. I guess the problem is when I adding/removing ui control at runtime, the scrollviewer doesn't handle it quite well.
I'm wondering is there a better way to achieve this feature? Any suggestion is welcomed.
You can add a child control in a grid by calling grid.Children.Add(newChildControl). You can also assign the child control to specific row/column/span by calling Grid.SetRow/Column/RowSpan/ColumnSpan.
Basically I want to create a form. It might be a little long after I am done so I wanted to use a list box so the form is scrollable. I would like to have a label with a text box next to it for input from the user. How can I have the label and text box side by side in the list box?
Also, if anyone has any other suggestions on how to create a form please let me know.
Do not use a ListBox to add scrolling capability, use the ScrollViewer for that.
Could you sketch/draw an image that explains your ideas?
<Grid>
<ScrollViewer>
<Grid ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Target="{Binding ElementName=textBlock}"
VerticalAlignment="Center">_Name:</Label>
<TextBox Grid.Column="1"
x:Name="textBlock"
VerticalAlignment="Center"
Text="Enter text here" />
</Grid>
<Border Grid.Column="1">
<TextBlock Text="Anything you like" />
</Border>
</Grid>
</ScrollViewer>
</Grid>
There are many other options. E.g., you could put the ScrollViewer inside the Border in my example. That would make the content of the Border scrollable instead of the entire form. Key is to determine what you want it to look like and how you want it to behave.
The best way to do that is by drawing or prototyping in a designer such as Expression Blend.
Wrap your containing panel (e.g. Grid) in a ScrollViewer - http://msdn.microsoft.com/en-us/library/ms750665.aspx
My group is building an editor-type app in WPF. One thing we noticed is that on my WinXP machine, running with the "windows classic style" theme, the text on buttons is fits fine. However on my friend's machine, who's running with the "windows xp style" theme, the font size is bigger so text on buttons get clipped at the bottom.
Is there a way to handle this nicely, like automatically resizing controls to fit the text?
I hesitate to manually resize the button to fit his layout as anyone else can have totally different settings through the Display Properties and Accessibility Options.
Thanks!
A WPF button will automatically resize to fit the content that it has been given, however it will only do this when it is inside a container that does not enforce size and its size has not been set manually. To prove this mess around with the font size in the following code snippet:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button
Grid.Column="1"
Grid.Row="1"
FontSize="24"
Content="QWERTY"/>
</Grid>
I guess that your buttons haven't resized because you have constrained them. To fix this you need to decide how you want them to resize (which can be very complicated when elements would overlap if they just grew blindly) and if none of the supplied panel types perform the growth behaviour that you are looking for then you may need to write your own that does.
Have you hardcoded element sizes using Width and Height properties? In WPF the recommended way to do this is to use the several layout containers.
The following is an example of a grid which lays two buttons at the bottom and a textbox at the top.
<Grid>
<Grid.RowDefinitions>
<!-- TextBox row with unspecified height. -->
<RowDefinition Height="*"/>
<!-- Button row with automated height so it resizes to
fit the content -->
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Textbox on first row. -->
<TextBox Margin="3" Name="textBox1" Grid.Row="0" AcceptsReturn="True" />
<!-- StackPanel which lays the two buttons at the bottom horizontally.
RightToLeft is specified so that the first button appears on right.
-->
<StackPanel Grid.Row="1" HorizontalAlignment="Right"
Orientation="Horizontal" FlowDirection="RightToLeft">
<!-- The buttons. Only padding and margin are hardcoded so these
can resize to the contents -->
<Button Padding="3" Margin="3">OK</Button>
<Button Padding="3" Margin="3">Cancel</Button>
</StackPanel>
</Grid>