I have a expander and TextBlock.
It at times overlaps for spaces.
I want the expander BringToFront.
But no such property in WPF.
How to do it?
Is seems you are using the Canvas Panel for positioning your Expander and TextBlock.
First of all: Don't use a Canvas, it's oldstyle and not flexible enough. Use one of the other Panels (i.e. Grid) to layout your Controls. Then the problem should be gone.
If you must use a Canvas and you want to prevent overlapping, you can use the Panel.ZOrder attached property. You should also set the Background property of the Expander to something opaque like "White". By default the Background property has the null-value, which means transparent.
If the issue is a design time issue:
WPF will put the last item in the XAML on top. For instance if I had this:
<TextBlock Text="one"/>
<TextBlock Text="Two"/>
TextBlock "Two" would be displayed in front of "One" because it is last in the XAML.
If it's a runtime issue bochja had it right up top with the Panel.ZOrder.
It would probably be easiest to use a Grid, so the element order doesn't matter.
Eg:
<Grid DataContext="{Binding CurrentRequest,ElementName=root}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="These labels"/>
<Label Grid.Row="0" Grid.Column="0" Content="Will overlap"/>
<Label Grid.Row="1" Grid.Column="0" Content="Next row"/>
Related
Separate a Grid into multiple sections like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
</Grid>
Now create a label which centers the content in the cell.
<Label Grid.Row="0" Grid.Column="0" Content="Hello World" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
Observe that it seems to be centered.
Now, change the font of the label to anything larger than 12. The larger the better, for example 24.
<Label FontSize="24" Grid.Row="0" Grid.Column="0" Content="Hello World" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
See that the text is no longer centered.
How can I center the text into the cell keeping into account the size of the text? I don't want to specifically define a Margin for each one which does work, but it requires trial and error and is not very efficient.
I'm looking for ideally a pure WPF/XAML solution, built in or custom. Though it seems to me this functionality might require a converter and a custom style targeting a label which is unfortunate as it seems like a fair amount of effort for something so simple.
Is there an easy solution to this?
The behaviour you describe is caused by the Padding within the Label (which is not zero by default).
try:
<Label Padding="0" FontSize="30" Grid.Row="0" Grid.Column="0" Content="Hello World" HorizontalAlignment="Center" VerticalAlignment="Center">
Note: if the height for the row is too small to accomodate the fontsize, the visible part of the text will be the upper part, not the center part.
I guess it would be quiet useless for the renderer to try to center the text in that case.
I didn't understand your question clearly.But I think this is the line of code you want.I just added a col span property to the code.
< Label FontSize="24" Grid.Row="0" Background="AliceBlue" Grid.ColumnSpan="2" Content="Hello World" HorizontalAlignment="Center" VerticalAlignment="Center">< /Label>
I have got the following XAML:
<StackPanel HorizontalAlignment="Center">
<Image Name="logo" Source="logo.png" Margin="0,0,0,50"/>
<ScrollViewer>
<Dashboard_Control:AlignableWrapPanel x:Name="wrapPanel"/>
</ScrollViewer>
<TextBlock FontWeight="Bold" HorizontalAlignment="Center" x:Name="txtBottomText"></TextBlock>
</StackPanel>
I would like that the wrapPanel is scrollable only, so that the txtBottomText control will always be at the bottom as you scroll, and the logo image control will always be at the top - essentially only allowing the wrapPanel to be scrollable.
I have tried adding a ScrollViewer as shown above, however it never shows. I even tried adding a property to always have the vertical scrollbar, however it appears without letting me scroll (the scrollbar is disabled).
I suspect that this is because my wrapPanel's content is dynamically generated at run-time like so:
wrapPanel.Children.Add(content);
Any ideas what I can do to fix this?
It's not because of your wrapPanel's content. but because you're using a StackPanel to contain everything.
StackPanels grow indefinitely in the direction determined by their Orientation property. By default, that's vertically.
In your case, that makes the ScrollViewer "think" it has enough available space to stretch itself to accomodate its content, instead of activating the scroll bars. So it simply gets bigger as the WrapPanel inside gets bigger, pushing the TextBlock down.
To avoid this, you need to use a different Panel that is able to properly assign the available space to each control. Like a Grid.
<Grid HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Name="logo" Source="logo.png" Margin="0,0,0,50"/>
<ScrollViewer Grid.Row="1">
<Dashboard_Control:AlignableWrapPanel x:Name="wrapPanel"/>
</ScrollViewer>
<TextBlock Grid.Row="2" FontWeight="Bold" HorizontalAlignment="Center" x:Name="txtBottomText"></TextBlock>
</Grid>
I usually say that StackPanels tend to be overused :P They're practical and easy to use, but they have a bunch of quirks and limitations that make them not suitable for many situations, like this one.
EDIT: Make sure, also, that the Grid is not contained inside another vertical StackPanel, a Grid row with Height set to Auto, or something like that.
If the Height of your WrapPanel exceeds the height of the control or window where you have put the controls, the Textblock below the Wrap Panel inside the Stack Panel is put after the Wrap panel and so it is below the scroll area.
To be able to leave the Textblock always visible you have two means:
1) limit the height of your Wrap panel
2) Use a container like a Grid with 3 rows instead of the stack panel and put the Row Heights of the Grid respectively to
Auto, *, Auto so that the image on top and the textblock on bottom use the space of their content and the Scroll panel uses all the space remaining
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row ="0" Source="myimage.jpg" />
<ScrollViewer Grid.Row="1">
<WrapPanel Height="1200" Width="600">
<TextBlock>Ciao sono io</TextBlock>
</WrapPanel>
</ScrollViewer>
<TextBox Grid.Row="2" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="IO c'ero" />
</Grid>
You have to set a fixed heigh to your scrollviewer - if not, the scrollviewer takes as much space as he needs, in order to show the complete content of its children.
Solutions:
Set the Height property of your scollviewer
Use a grid instead of a stackpanel an set the first and third rowheight to auto
I have a ListView inside a Grid which in turn is inside an "overall ScrollViewer".
Users should be able to scroll across the entire page horizontally and then scroll vertically down several child list like elements. While I am able to scroll horizontally, placing the outer ScrollViewer around the page content breaks my ListViews
Here is a cut down version of my XAML setup:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Uid="Title" Text="Title"/>
<ScrollViewer Grid.Row="1" ZoomMode="Disabled"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled"
HorizontalScrollMode="Enabled">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="380" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--My List-->
<ListView x:Name="MyList" Grid.Column="0" />
<Grid x:Name="AppointmentDetailView" Grid.Column="1">
<!--Some other stuff-->
</Grid>
</Grid>
</ScrollViewer>
</Grid>
If I set a fixed height on any parent of the ListView or the ListView itself the scrolling works as expected but fixing the height is undesirable for screens of varying sizes. I tried binding to the ActualHeight of the ListViews parents but no luck.
It seems like the ScrollViewers children are not constrained to the height available even when the ScrollViewer.VerticalScrollMode is disabled. Seems rather odd to me, I would have expected the ScrollViewer's layout logic to be similar to Grid in the direction it has been disabled.
Any help with this is appreciated, Thank you!
I found a workaround that involves wrapping my ScrollViewer in a Grid and binding to the outer Grids ActualHeightProperty on the child element of the ScrollViewer. its a bit of a hack but does what I need it to and goes something like this
<Grid x:Name="ScrollViewerContainer" ...>
<ScrollViewer VerticalScrollMode="Disabled" ...>
<!--Page Content-->
<Grid Height="{Binding ActualHeight, ElementName=ScrollViewerContainer}" ...>
....
Personally I feel like the ScrollViewer should not allow its children to determine its Width/Height when the scroll mode is disabled in a particular direction as it breaks nested ScrollViewer's. It should revert back to the available space. But hey, I'm not Microsoft..
I want to create a dataGrind in WPF c# with different type of cells in same column to take user input.
My DataGrid should looks like this:
So how will I format Name and Age cells to textbox cell. Gender and State cell to Combobox cell?
If you require more fields in the future, and want to reuse some of the functionality, take a look at the WPF Property Grid.
If your rows are fixed in this layout and you don't expect them to change frequently, you can consider an alternative approach using a standard grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock>Name</TextBlock>
<TextBlock Grid.Row="1">Age</TextBlock>
<TextBlock Grid.Row="2">Gender</TextBlock>
<TextBlock Grid.Row="3">State</TextBlock>
<TextBox Grid.Column="1"></TextBox>
<TextBox Grid.Row="1" Grid.Column="1"></TextBox>
<ComboBox Grid.Row="2" Grid.Column="1"></ComboBox>
<ComboBox Grid.Row="3" Grid.Column="1"></ComboBox>
</Grid>
If you use the MVVM-Pattern then (I think so) you shoud create a ViewModel for cells and bind it as ItemSource. In your ViewModel you can set the Elements that you need. It should be possible to change between TextBoxes and ComboBoxes.
Possible you find here the answer:
WPF DataGrid with different UserControl in each Cell;
WPF DataGrid different edit controls within a single column
http://tech.pro/tutorial/807/wpf-tutorial-how-to-use-a-datatemplateselector
P.S. Its not enough for an answer, but I have not enough Points to comment the question.
So I'm pretty new to WPF and I'm having trouble with the layout of my Window. Currently I have a WPF application with a Grid defined as such:
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
In the very top row, spanning two columns, I have a Menu. In the second row I have some Labels in the first column and an Image and a WindowsFormsHost in the second, finally, in the third row I have a graphing control in the second column. By default, I set the size of the Image and WFH to 570 x 413. Now, I'd like for both the Image and WFH to expand when my Window is resized such that they maintain the same relative (to the Window) size. (I actually would like the same to happen to my graphing control as well, but I can probably figure that one out if I can get the others. I cannot for the life of me figure out what setting I need to turn on/off or what I might need to bind or whatever in order to make this happen. Any help is greatly appreciated!
Thanks!
Have you tried:
<RowDefinition Height="*" />
Make sure to assign your Grid.Row within your image or control, but do not sign the controls height/width properties. The control should autosize with expansion.
Update
Did a quick test to make sure this works.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Example"/>
<Image Grid.Row="1" Source="c:\Example.jpg"/>
<Label Grid.Row="2" Content="Example2"/>
</Grid>
The image expands with the application based on the image's proportions. It does expand, but it keeps it's dimensions along with the full image in view. If you were to change the rowdefinition from ***** to Auto, you will notice that the image will expand, but it will expand past your view. Meaning you will not always see the full image.
I would suggest making a simple application like above, and playing with constraints to figure out what each does.
You need to show more information in your description, because all of the properties of the Grid and of the Image, etc. will factor into the layout.
However, you probably want to look at the HorizontalAlignment and VerticalAlignment properties of your Grid and of your Image, as well as the Stretch property of the Image. Also, you don't want to specify a fixed size for the image (you can specify a MinWidth and a MinHeight if you want them to be a certain size when starting up).
Here's a quick example that shows a grid filling a window, with a scaling image.
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Content="First Row" />
<Label Grid.Column="0" Grid.Row="1" Content="Column 0, Row 1" />
<Image Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Source="Resources\ExamplePicture.png"
Stretch="Uniform" />