The code below contains a simple grid with a button in grid's middle column. The button width is (by intention) larger than column with it is placed into. Notice that the left part of the button is visible the right one is not. What do I have to do to get both left and right button parts invisible? Right part of the button is z-below the right grid column, but the left part of the button is z-above the left grid column. I need the left button part also to be hidden by the left grid column.
This is a simplified version of XAML where I am trying to animate kind of 'film strip'. Film should be placed z-below left and right grid column and z-above the middle part. The animation works nicely, but user see for a while controls on the left part she is not supposed to see as those should be 'covered' by the left grid column.
<Grid x:Name="LayoutRoot">
<Border Background="Yellow" x:Name="ContentBorder">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition />
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" >
<Button Content="Button" Margin="-20, 0, 0, 0" Width="240" Height="33"/>
</Grid>
</Grid>
</Border>
</Grid>
Try adding a ClipToBounds
<Grid x:Name="LayoutRoot">
<Border Background="Yellow" x:Name="ContentBorder">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition />
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" ClipToBounds="True" >
<Button Content="Button" Margin="-20, 0, 0, 0" Width="240" Height="33"/>
</Grid>
</Grid>
</Border>
</Grid>
Related
Define two column in wpf,each column has a GridControl (left GridControl should take whole area if right GridControl is collapsed or take half area if right GridControl is visible)
I try to set ColumnDefinition (Width=auto or Width=*) but do not achieve the expectation
Try this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Border BorderBrush="HotPink" BorderThickness="1">
<TextBlock Text="Left Grid"/>
</Border>
</Grid>
<Grid Grid.Column="1" Visibility="Collapsed">
<Border BorderBrush="HotPink" BorderThickness="1">
<TextBlock Text="Right Grid"/>
</Border>
</Grid>
</Grid>
In WPF application, a grid panel with 3 columns as defined below
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
There is a slider in the second column,the width of the slider needs to reduce when the window width reduces and at some point the slider needs to disappear (kind of responsive design).
I tried naming the second column and binding width of slider to "ActualWidth" property of the column, but it didn't help.
There is another way to handle window's size change event and do some adjustments. Any other simple way?
Update 1 :
Adding more of my code
<Grid VerticalAlignment="Top" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<!-- some other elements in cell 0-->
<StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">
<Button Width="22" Height="22">
<Image Source="a.png"/>
</Button>
<Slider MinWidth="100" MaxWidth="320" Width="320"/>
<Button Width="22" Height="22" >
<Image Source="b.png"/>
</Button>
<!-- some other elements in cell 2-->
</StackPanel>
</Grid>
That's because the ActualWidth of a ColumnDefinition is not a DependencyProperty and ColumnDefinition doesn't notify when this property has changed.
Instead try grouping all your controls in column 2 inside a Grid and bind to the ActualWidth of the grid.
Assuming the slider is a generic WPF slider control, then simply placing the slider inside the second column should work, as by default the control should fill all available column space. Perhaps a style you have applied to the slider is affecting this functionality? The slider should fill up the column, and shrink down into nothingness as the window/column resizes if you use this code
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Slider Grid.Column='1'></Slider>
</Grid>
EDIT:
Based on your new code, perhaps this might be more what you are after?
<DockPanel VerticalAlignment="Top">
<!-- Elements in cell 0-->
<Grid Width="250" DockPanel.Dock="Left"/>
<!-- Elements in cell 2-->
<Grid Width="250" DockPanel.Dock="Right"/>
<!-- Cell 1-->
<DockPanel>
<Button DockPanel.Dock="Left" Width="22" Height="22">
<Rectangle Fill="Blue"/>
</Button>
<Button DockPanel.Dock="Right" Width="22" Height="22" >
<Rectangle Fill="Blue"/>
</Button>
<Slider/>
</DockPanel>
</DockPanel>
The slider will resize and disappear accordingly, and the slider position will remain consistent during the resizing of the window
I have a DockPanel and it contains a ScrollViewer [ center aligned ] and a button on left and right .
My xaml is like
<DockPanel LastChildFill="True">
<Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch" DockPanel.Dock="Left">Left</Button>
<Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch" DockPanel.Dock="Right">Right</Button>
<ScrollViewer Name="scrollAreaPageView" HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
</ScrollViewer>
</DockPanel>
And it generates the output as expected , but Left and right butons are not stretched fully to left and right to the ScrollViewer( They are on corners only).
The screen shot of output is
How can i make it stretch fully to left and right of center scrollViewer
A DockPanel may not be ideal in this scenario you may perhaps use Grid here with the desired column definition
sample
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button>Left</Button>
<ScrollViewer Name="scrollAreaPageView"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.Column="1">
</ScrollViewer>
<Button Grid.Column="2">Right</Button>
</Grid>
in above example the space available after subtracting the space required b
Alternate approach
I attempted to do it pure xaml, this approach will helo you achieve the desired without code behind. here is the example
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="{Binding ActualWidth,ElementName=scrollAreaPageView}" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button>Left</Button>
<Button Grid.Column="2">Right</Button>
</Grid>
<ScrollViewer HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="50,0"
Name="scrollAreaPageView"
HorizontalScrollBarVisibility="Auto">
</ScrollViewer>
</Grid>
Margin in the scrollAreaPageView element defines minimum width of the buttons. give it a try and see if that helps
I'm trying to build a two-column layout where the width of the columns can be changed by using a splitter. The right column's width shouldn't change when the browser window is resized (it shouldn't be proportional to the grid width). Both columns should have a minimum width. When the browser window is too narrow to display both columns a scrollbar should appear.
This is my XAML:
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<Grid Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="300" Width="300*" />
<ColumnDefinition Width="10" />
<ColumnDefinition MinWidth="100" Width="100"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
<sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
<Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
</Grid>
</ScrollViewer>
</Grid>
The problem I'm having is when the splitter is dragged to the left and the left column's minwidth is reached - the right column begins to grow very rapidly and the scrollbar appears. Removing the width setting from the right column eliminates the weird behavior but now the right column starts to grow proportionally when the window is resized...
I'd like the splitter to behave the same way as when it is dragged to the right - I'd like it to stop after the minwidth is reached.
You should disable the "HorizontalScrollBarVisibility".
This code works for me:
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled">
<Grid Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="300" Width="300*" />
<ColumnDefinition Width="10" />
<ColumnDefinition MinWidth="100" Width="100"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
<sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
<Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
</Grid>
</ScrollViewer>
</Grid>
The ScrollViewer gives the grid endless space to grow. Hence the minWidth never stops it.
Obviously there is no need of ScrollViewer that is disabled both vertically and horizontally. Better move the scroll bar inside the grid surrounding the content of every column.
I think I was finally able to come up with a workaround. I'm forcing the width in the code-behind when the layout is changing.
XAML:
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer x:Name="Scroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<Grid x:Name="Workspace" Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top" LayoutUpdated="Workspace_LayoutUpdated">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="300" Width="300*" />
<ColumnDefinition Width="10" />
<ColumnDefinition MinWidth="100" Width="100"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
<sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
<Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
</Grid>
</ScrollViewer>
</Grid>
Code behind:
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void Workspace_LayoutUpdated(object sender, EventArgs e)
{
Workspace.Width = Scroller.ViewportWidth - 1;
}
}
The reason it behaves this way is that you have specified the first column Width="300*" with asterisks,
and the third column Width="100" without asterisks.
Just put asterisks to the first and third columns, or remove respectively, and it will work the way you wish.
Ok this is what I wish to do.
I have a resizeable window which has 3 controls in same row in flowing order: textBlock, textBox and button.
textBlock and button have dynamic texts. So theirs size depends upon text inside.
Now what I wish to do is that textBox in the middle is always filling up all empty space between textBlock and button.
How do I do that?
I tried with the following code but it doesn't work because of fixed width in 1. and 3. column.
<Grid Margin="0,0,5,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" HorizontalAlignment="Left" Text="Text1"/>
<TextBox Grid.Column="1"/>
<Button Grid.Column="2" Content="Button1" HorizontalAlignment="Center"/>
</Grid>
You can use Auto for the two outer column widths instead of specifying the width
<Grid Margin="0,0,5,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Text1" />
<TextBox Grid.Column="1"/>
<Button Grid.Column="2" Content="Button1" />
</Grid>
You probably don't need the HorizontalAlignment in the columns either