Working on the XAML file and C# at the back end.
I have totally 4 buttons.
By clicking 1st, other three will be Visible and by clicking same 1st button the three will hide.
Though they are working fine, I want them to aligned vertical and not horizontal by breaking the line.
Also I need to add images before each buttons. Something like this.
Please suggest. Thank you.
Followed this answer, but I understand its for the text and not for buttons.
Here's by code for the buttons:
<Button Content ="Buttons" Click="ButtonBase_OnClick" Margin="15,15,15,15"></Button>
<Button Content="Topo Map" Visibility="Collapsed" Click="Topo_OnClick"
Name="But2" Margin="15,15,15,15"/>
<Button Content="Street Map" Visibility="Collapsed" Click="Street_OnClick"
Name="But3" Margin="15,15,15,15"/>
<Button Content="Imagery Map" Visibility="Collapsed"Click="Imagery_OnClick"
Name="But4" Margin="15,15,15,15"/>
You will need to wrap your buttons in a content container, like a stackpanel or grid. Keep in mind a stack panel will size to fit it's contents where a grid can size to fit available space. I would use a stackpanel to hold the buttons and a grid to hold your button content:
<StackPanel Orientation="Vertical">
<Button Click="ButtonBase_OnClick" Margin="15">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image />
<TextBlock Text="Buttons" />
</Grid>
</Button>
...
</StackPanel>
I think you're looking for the WrapPanel of the Silverlight Toolkit.
Related
I've just started using WPF and working on a DataGrid to store information imported from CSV files. Here is what it looks like after importing some data:
The part circled in red is the area I want to remove, as I want the grid to fully stretch to the right if this is possible. I've already set HorizontalAlignment="Stretch" and ColumnWidth="*", so I'm not sure why this extra right margin is appearing. Here's the section of my XAML file for reference. Removing the gridsplitter and stack panel didn't seem to have any effect on this extra part.
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="100" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" MinWidth="100" />
</Grid.ColumnDefinitions>
<DataGrid x:Name="TestGrid"
AutoGenerateColumns="True"
ColumnWidth="*"
ItemsSource="{Binding}"
HeadersVisibility="Column"
HorizontalAlignment="Stretch"
GridLinesVisibility="All" />
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<ui:SimpleStackPanel Grid.Column="2" Margin="8,5,0,0">
<Button x:Name="btnAdd"
Content="Add File"
Margin="0,5,0,0"
Style="{StaticResource AccentButtonStyle}"
Click="ButtonAddName_Click" />
</ui:SimpleStackPanel>
</Grid>
How can I change my DataGrid to take up all of the horizontal space?
Whoops, I figured it out. The "problem" was with the ModernWPF UI library: I realized I hadn't tested adding more rows than it could fit on the screen, as that extra spacing is saved for the scrollbar that appears. For anyone else with the same confusion, this extra space can't be removed as far as I know. For default WPF, the scrollbar doesn't take up space until it appears as an option for those who don't want the spacing.
Set AutoGenerateColumns="False"
I am working on a WPF application. I have a StackPanel in my xaml file. In StackPanel there are three buttons. Problem is that all button are either on left side or on the right side. What I want is that one button is one the left side and two buttons on the right side.
<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft" >
<Button Content="Open"/>
<Button Content="Close"/>
<Button Content="Help"/>
</StackPanel>
The output of this is like this.
As you can see that there is a lot of space on the left side. I want my Help button to the extreme left side whil Close and Open on the extreme right. I think I can do this by implementing a grid or something like that, but I want to ask that whether I can do this with using stack panel only.
You cannot do that with a StackPanel, however you don't "have" to use a Grid.
You can use a DockPanel as a compromise
<DockPanel LastChildFill="False">
<Button Content="Help" DockPanel.Dock="Left" />
<Button Content="Close" DockPanel.Dock="Right" />
<Button Content="Open" DockPanel.Dock="Right" />
</DockPanel>
LastChildFill="False" will make sure your last added control does not end up "filling" up all the remaining space thereby giving you the look you want.
You need to use a Grid for that:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Help"/>
<Button Grid.Column="1" Content="Close"/>
<Button Grid.Column="2" Content="Open"/>
</Grid>
NOTE: This is one of the first time I'm using WPF.
I am trying to align a certain control, let's say a button for now, in the bottom right corner. But when I debug my application, it misses 8 pixels to the bottom and right. I will attach 2 pictures to show you what happens.
How do I keep the button in place?
My XAML code:
<Window x:Class="Plugin_Manager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Plugin Manager" Height="350" Width="525" Loaded="Window_Loaded_1">
<Grid x:Name="GridMain">
<Button Content="Refresh" Margin="432,288,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75"/>
<ListView HorizontalAlignment="Left" Height="273" Margin="10,10,0,0" VerticalAlignment="Top" Width="497">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
</Grid>
If you choose to use Grid layout you should try to avoid placing objects via Margin. Margin should be used to create buffer around an object, not move it to a specific point in the window. Use the layout manager's power to your advantage!
Here is a Grid example that does what you are looking for.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" />
<Button Grid.Row="1" HorizontalAlignment="Right" Content="Push Me" />
</Grid>
I would also read up on Layout Manager in WPF. There are several; each having its own advantages & disadvantages.
Here is a DockPanel version.
<DockPanel>
<Button DockPanel.Dock="Bottom" HorizontalAlignment="Right" Content="Push Me" />
<ListView />
</DockPanel>
To create your buffer between the button and the window chrome you could do a few different things:
<Grid Margin="10"> will apply a 10 pixel space between all content and the window chrome on all side.
<Grid Margin="0,0,10,10"> would indent all content, but only on the right & bottom.
<Grid Margin="10,0,10,10"> indents all around, except the top (I commonly do this one, with a different margin value).
<Button Margin="0,0,10,10"> would indent only the button from the chrome (this is the direct answer to your comment question).
Replace the Grid above with DockPanel for the second example, or whatever other Layout Manager you are using.
A usability side note: Your confirmation buttons (I'm assuming your button will be an Ok/Cancel type button) should not be indented differently from the rest of your content. All controls that butt up against the right margin should do so at the same point (i.e., you can draw a vertical line down the right side of them all).
So, using your question's example: your button should not be indented 10 pixels to the right while your list box is not. Keeping things lined up will improve the overall look to your application.
(this ends my "usability and look-and-feel is important" side note) :)
<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"/>
Some code example will help. Try using the alignment in xaml for your button as shown below. Ensure that the margins on the button are 0.
<Button Margin="0" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
Looking at the sample code, it is your margins and the alignment you have that are probably causing that.
Just some pointers that may help. Instead of using large margins to align the controls, I find it much easier to work with Column and Row definitions on the grid. This way you can align your controls using the grid and they will size properly as you resize your window. I attached an example in hopes it helps in your new adventures with WPF!
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Version Date" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding DateSubmitted}" Margin="3"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Report" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ReportName}" Margin="3"/>
</Grid>
I have a grid of controls, where each editable control (checkbox, combobox, etc.) has an associated label. I want to share a tooltip between the label and its control.
Now this is something that I have accomplished by using BindableToolTips: I simply define the ToolTip in my XAML resources, and then set the same ToolTip object individually on the label and the control.
Code:
<TextBlock Grid.Row="0"
Grid.Column="0"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}"
Content="Example" />
Unfortunately, this doesn't make it appear smoothly... When the mouse is moved from the label to the control, or from the control to the label, the tooltip disappears and reopens, appearing to flicker. This occurs even when there is no gap between the label and control, and does not look good. This obviously occurs because they are two separate tooltips.
I would like to somehow group the label and its associated control, and have the tooltip appear on that single group; this way, it can appear fluidly and not flicker when the mouse is moved between the two. Unfortunately, I am struggling to do this. Here are some things I have tried...
Empty TextBlock with the tooltip applied and ColumnSpan=2.
Unfortunately, this prevents the control from receiving mouse clicks, as the TextBlock covers it up invisibly. I have tried setting IsHitTestVisible to false, but then that prevents it from receiving mouse over events, which stops the tooltip appearing at all. If I could just make it so that the mouse clicks through the empty TextBlock, but the TextBlock still gets mouse over events, then it would be perfect.
Code:
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Content="Example" />
<TextBlock Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}" />
Nested grid specifically for the one label and one control.
This method seems to work: the tooltip appears whenever the mouse is anywhere over the inner grid, and mouse events are still successfully passed to the control. Unfortunately, this has three problems:
It is very messy, as I will need many nested grids for every label/control combination.
The "Auto" column widths no longer take into account the widths of other controls in the outer grid, because this is of course a separate grid.
It seems to ignore the tooltip placement settings, which are Placement=Right and with PlacementTarget being the specific control. Instead, the tooltip appears underneath the inner grid.
If the last two problems could be fixed, then this would be an acceptable solution.
Code:
<Grid Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Content="Example" />
</Grid>
Does anybody have any ideas for a good solution to this problem? I simply want my tooltips to appear over both the label and the associated control as though they are one element, without flickering when the mouse is moved between them all. That's all.
Just wrap the controls in a content presenter and attach the tooltip to that.
<Window x:Class="StackOverflowWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<ContentPresenter ToolTip="Blah">
<ContentPresenter.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Example label:"/>
<CheckBox Grid.Column="1" x:Name="ExampleControl" Content="Example" />
</Grid>
</ContentPresenter.Content>
</ContentPresenter>
</Window>
Hello I want a silverlight grid layout panel.
The width should be 100%.
There should be 2 columns that both take 50%.
In the columns there should be buttons that take 100% of the column cell..
Somehow I mess it up all the time and cannot find a way to do this.
Gridpanel is not a must... Stackpanel or whatever is fine too..
One more thing.. the grid is contained in a stackpanel
If nothing works.. code is fine too..
-------Stackpanel--------
|---griddpanel-100%-----|
||50% |50% ||
||Button100%|Button100%||
|-----------------------|
-------------------------
Thanks for any help...
This should do it it:
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0">B1</Button>
<Button Grid.Column="1">B2</Button>
</Grid>
</StackPanel>