I have the fallowing code example, which behavior is shown on image below.
<DockPanel LastChildFill="False" >
<ScrollViewer DockPanel.Dock="Top">
<ItemsControl>
<Label Content ="First" BorderBrush="Violet" BorderThickness="2"/>
<Label Content ="Second" BorderBrush="Black" BorderThickness="2"/>
<Label Content ="Third" BorderBrush="Yellow" BorderThickness="2" />
<Label Content ="Fourth" BorderBrush="Green" BorderThickness="2"/>
<Label Content ="Fifth" BorderBrush="Maroon" BorderThickness="2"/>
</ItemsControl>
</ScrollViewer>
<Button Height="50" DockPanel.Dock="Top">button</Button>
</DockPanel>
The problem here is that Button is getting clipped during resize and only then ScrollViewer activates. How can I prevent Button clipping and resize ScrollViewer instead when there is not enough space?
Exchange the order of the DockPanel children and set LastChildFill to True to make the ScrollViewer filling. Dock the Button at Bottom and set the Dockpanel's VerticalAlignment to Top.
<DockPanel LastChildFill="True" VerticalAlignment="Top">
<Button Height="50" DockPanel.Dock="Bottom">button</Button>
<ScrollViewer>
<ItemsControl>
<Label Content ="First" BorderBrush="Violet" BorderThickness="2"/>
<Label Content ="Second" BorderBrush="Black" BorderThickness="2"/>
<Label Content ="Third" BorderBrush="Yellow" BorderThickness="2"/>
<Label Content ="Fourth" BorderBrush="Green" BorderThickness="2"/>
<Label Content ="Fifth" BorderBrush="Maroon" BorderThickness="2"/>
</ItemsControl>
</ScrollViewer>
</DockPanel>
Related
I need to create a button similar like below, it is a textbox and a button combined, you can click "Get Code" button and you will receive a SMS text with the code, then you can input the code in the textbox.
textbox and a button
anyone can help?
Hi, my current code is quite simple.
<Button
Grid.Row="2"
Grid.Column="0"
HorizontalOptions="Center"
Text="Get Code"
FontFamily="{ StaticResource IconsFontFamily }"
Style="{ StaticResource CircleActionButtonFlatStyle }"
micro:Message.Attach="[Event Clicked] = [Action SendVerifyCodeAsync()]"/>
<Entry
Grid.Column="1"
Grid.Row="2"
Grid.ColumnSpan="2"
VerticalOptions="Center"
HorizontalOptions="FillAndExpand"
Text="{Binding Code}"
Placeholder="Send Code" />
Has people said in comments, you need to wrap it in borders.
With this example, you just need to change the color for the ones you want, and then you can set Click events in the respective borders to make them act like buttons and do the respective actions. You can add the code micro:Message.Attach="[Event Clicked] = [Action SendVerifyCodeAsync()]" to the respective border.
Code:
<Border BorderBrush="Black" BorderThickness="1" Margin="10" CornerRadius="15">
<Grid Margin="-1">
<TextBox TextWrapping="Wrap" Text="Input code" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Left" Margin="5,0,0,0" VerticalAlignment="Center"/>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right" CornerRadius="15" Background="#FF39D3D3">
<TextBlock TextWrapping="Wrap" Text="Get Code" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0"/>
</Border>
</Grid>
</Border>
Example:
I have a program that lets you edit different properties so that you can edit a different control.
I'm trying to get the layout right for the editor but I can't seem to get it easily.
I have put it in a viewbox so it sizes according to the screen. This is the XAML for the editor:
<Viewbox Grid.Column="0" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Center">
<TabControl Background="{DynamicResource CustomOrange}">
<TabItem Header="Background" Visibility="Visible" FontSize="10">
<StackPanel>
<DockPanel LastChildFill="False">
<Label Content="Background" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30"/>
</DockPanel>
<DockPanel LastChildFill="False" Margin="2">
<Label Content="Background Image" DockPanel.Dock="Left"/>
<Button Content="Find Image" DockPanel.Dock="Right"/>
</DockPanel>
<DockPanel LastChildFill="False" Margin="2">
<Label Content="Show Text" DockPanel.Dock="Left"/>
<CheckBox Content="Find Image" DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DockPanel>
</StackPanel>
</TabItem>
<TabItem Header="Button" Visibility="Visible">
<StackPanel>
<DockPanel LastChildFill="False">
<Label Content="Background IMAGE" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30"/>
</DockPanel>
<DockPanel LastChildFill="False" Margin="2">
<Label Content="Background Image" DockPanel.Dock="Left"/>
<Button Content="Find Image" DockPanel.Dock="Right"/>
</DockPanel>
<DockPanel LastChildFill="False" Margin="2">
<Label Content="Show Text" DockPanel.Dock="Left"/>
<CheckBox Content="Find Image" DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DockPanel>
</StackPanel>
</TabItem>
</TabControl>
</Viewbox>
The problem is that the first TabItem looks like this:
But because I have changed the content of the label, the second TabItem looks like this:
Now, I know there are simpler ways to do this, but the problem is I don't know for sure how many options I am implementing for the user (Width, Height, Location, Font, Background, Content etc).
I have done it before with a grid but the problem is anytime I remove an option then all of them need to be re-done so that they are all in the exact Grid.Row which is why I am using StackPanel for the rows, and I am using the DockPanel so they keep separated horizontally
Thank you!!!
In a WPF project, I want to dock a DataGrid to the bottom of a window so that if the window resizes, I will be able to utilize more of the DataGrid. Like this:
How do I do that? All my DockPanel attempts have failed.
The current attempt is here:
<Window x:Class="Foo.SQLDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:Foo.Controls"
Title="test" ResizeMode="CanResize" Width="400" Height="400">
<StackPanel Orientation="Vertical" Height="Auto" Width="Auto">
<StackPanel Orientation="Vertical">
<Label Content="SQL" HorizontalAlignment="Left"/>
<TextBox Width="377" Height="100" Name="txtSQL"/>
<Button Content="Run SQL" Click="Button_Click_1" />
</StackPanel>
<Label Content="Result" HorizontalAlignment="Left"/>
<ScrollViewer Width="Auto" Height="180" DockPanel.Dock="Right,Bottom"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<DataGrid x:Name="dataResult" />
</ScrollViewer>
</StackPanel>
</Window>
The height of the scrollviewer+datagrid will not adapt however.
First of all, using DockPanel.Dock without having a DockPanel as a parent doesn't do much...
In my example I changed your root StackPanel to a DockPanel so it will work as you want.
I also used DockPanel.LastChildFill property which makes sure the last child of the DockPanel will get all the remaining space:
<DockPanel LastChildFill="True">
<StackPanel Orientation="Vertical" DockPanel.Dock="Top">
<Label Content="SQL" HorizontalAlignment="Left"/>
<TextBox Width="377" Height="100" Name="txtSQL"/>
<Button Content="Run SQL" Click="Button_Click_1" />
</StackPanel>
<Label Content="Result" HorizontalAlignment="Left" DockPanel.Dock="Top"/>
<ScrollViewer DockPanel.Dock="Bottom,Right"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<DataGrid x:Name="dataResult" />
</ScrollViewer>
</DockPanel>
Finally, to make it really stretch on all the remaining space, I removed the Height property you set, as this blocked it from stretching.
Not sure if useful or if i understand you question the right way but have you tried this:
<DataGrid DockPanel.Dock="Right, Bottom" VerticalAlignment="Bottom" HorizontalAlignment="Right" ></DataGrid>
I have a DockPanel with LastChildFill = true. It has 4 children: a StackPanel(top), another DockPanel(top), and three more StackPanels(bottom, left & none respectively). The last StackPanel ("ResultsPanel") has no DockPanel.Dock property set, nor does it have a width/height, yet when the databinding results in more rows than fit on the screen, it continues down behind the bottom-docked StackPanel. I would expect it to fill the center "hole" that I left between the other docked children.
If I leave the ScrollBarVisibilities set to Auto, it doesn't even show them. Any advice would be appreciated. Here is the pertinent code:
<DockPanel Name="JobsDock" LastChildFill="True">
<StackPanel DockPanel.Dock="Top" Height="40" >
<Label />
<Border CornerRadius="5" Width="90" Height="25" >
<Label Content="Classic View" />
</Border>
</StackPanel>
<DockPanel DockPanel.Dock="Top" Height="70" Name="SearchJobsPanel" >
<ComboBox Name="SearchOptionComboBox" VerticalAlignment="Bottom" Width="240" />
<StackPanel Height="50" Name="JobPanel" Width="90" Visibility="Collapsed" VerticalAlignment="Bottom" >
<Label Content="Job Number" HorizontalAlignment="Center" />
<TextBox Name="JobTextBox" />
</StackPanel>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Right">
<Button Height="25" Name="SearchButton" Width="90">
<StackPanel Orientation="Horizontal">
<Image Stretch="Fill" Margin="0,0,5,0" />
<Label Content="Search" FontSize="10" VerticalContentAlignment="Top" />
</StackPanel>
</Button>
</StackPanel>
</DockPanel>
<StackPanel Name="FiltersPanel" DockPanel.Dock="Left" Width="120" Opacity="0" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Name="ResetFilterButton" >
<Image Source="Images/ResetFilter.png" Width="30" />
</Button>
<Button Name="ApplyFilterButton" >
<Image Width="30" />
</Button>
</StackPanel>
<Label Name="ProjectsLabel" />
<Label Name="TasksLabel" Margin="0,10,0,0" />
</StackPanel>
<StackPanel Name="ResultsPanel" Opacity="0">
<ListView x:Name="DisplayedJobListView" ScrollViewer.VerticalScrollBarVisibility="Visible" >
<ListView.View>
<GridView>
</GridView>
</ListView.View>
</ListView>
</StackPanel>
Jurgen, on the msdn forum answered this question for me. Here is his reply:
Hi,
the last (filling) DockPanel child is a StackPanel ("ResultsPanel"). A StackPanel's layout is never defined by containing controls (there is nothing working like VerticalLayout="Stretch" for a StackPanel). It will always take the space neccessary for it's contained controls to fully expand.
As you only have one child in that StackPanel (which has a scrolling mechanism of it's own) remove the StackPanel.
Hope this helps.
Cheers
Jürgen
I would like the text to be anchored to the very bottom of the button, regardless of the Image aspect ratio.
I would like the Image to stretch to fit the remaining space in the button.
This xaml does have the Image fill the remaining space, but the text is placed right under the Image rather that at the very bottom of the button. Maybe I need to use something other than a DockPanel, but I am not sure what to use. The text does not need to be in a Label if there is a different way to do it that works.
Thanks
<Button Height="150" Width="150">
<DockPanel LastChildFill="True">
<Label HorizontalContentAlignment="Center" DockPanel.Dock="Bottom">foo</Label>
<Image Source="bar.png" />
</DockPanel>
</Button>
The Button element does not automatically allow its content to fill the entire Button area. To do that, you'll have to set both the HorizontalContentAlignment and VerticalContentAlignment properties to "Stretch."
<Button Height="150" Width="150"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<DockPanel LastChildFill="True">
<Label HorizontalContentAlignment="Center" DockPanel.Dock="Bottom">foo</Label>
<Image Source="bar.png" />
</DockPanel>
</Button>
You most likely need to tell the DockPanel to expand to its Height to the parent container:
<Button x:Name="button" Height="150" Width="150">
<DockPanel LastChildFill="True" Height="{Binding Height, ElementName=button}">
<Image DockPanel.Dock="Top" Source="bar.png" />
<Label DockPanel.Dock="Bottom" HorizontalContentAlignment="Center"
VerticalAlignment="Bottom">foo</Label>
</DockPanel>
</Button>
Just did a quick experiment
Maybe this helps?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="64*" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Image Source="bar.png" Stretch="UniformToFill" Grid.Row="0" />
<Label DockPanel.Dock="Bottom" Content="Foo" HorizontalAlignment="Center" Grid.Row="1" x:Name="Label1" VerticalAlignment="Bottom" ></Label>
</Grid>
In case try to adjust row heights.