I am really confused why some of my textboxes and buttons are being cut off, could someone please help me fix this problem? Thanks!!
XAML CODE
<Grid>
<TabControl>
<TabItem Name="tabHome">
<TabItem.Header>
<Label Content="Home" MouseLeftButtonDown="tabHome_Click"/>
</TabItem.Header>
<Grid>
<Button Content="Parse" Height="23" x:Name="btn_parse" Width="75" Click="buttonParse_Click" Margin="180,10,180,176"/>
<TextBox IsReadOnly="True" x:Name="txtbox_filepath" Height="25" Width="135" Margin="151,52,150,132" />
<Button Content="Reset" Height="23" x:Name="btn_reset" Width="75" Margin="180,122,180,64" Click="buttonReset_Click"/>
</Grid>
</TabItem>
<TabItem Name="tabConfig">
<TabItem.Header>
<Label Content="Configuration" MouseLeftButtonDown="tabConfig_Click"/>
</TabItem.Header>
<ScrollViewer>
<StackPanel Name="panelConfig">
</StackPanel>
</ScrollViewer>
</TabItem>
<Grid>
Screenshot
As you can see the button and the textbox is cut off in the corners.
Thank you for the help I appreciate it.
When you give a Margin value like this Margin="180,10,180,176" then it means that the control has to be placed 180 dip from Left and 10 dip from Top, 180 from Right and 176 from bottom with reference to the parent control. Your controls were clipped because of the high Margin values.
Note: dip - device independent pixels.
It is better to create RowDefinitions for Grid and place controls in separate rows with reasonable margin value as shown below.
<Grid>
<TabControl>
<TabItem Name="tabHome">
<TabItem.Header>
<Label Content="Home"/>
</TabItem.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Parse" Height="23" x:Name="btn_parse" Width="75" Margin="10" />
<TextBox Grid.Row="1" IsReadOnly="True" x:Name="txtbox_filepath" Height="25" Width="135" Margin="10" />
<Button Grid.Row="2" Content="Reset" Height="23" x:Name="btn_reset" Width="75" Margin="10"/>
</Grid>
</TabItem>
<TabItem Name="tabConfig">
<TabItem.Header>
<Label Content="Configuration"/>
</TabItem.Header>
<ScrollViewer>
<StackPanel Name="panelConfig">
</StackPanel>
</ScrollViewer>
</TabItem>
</TabControl>
</Grid>
You're explicitly setting a Height and Width for the buttons, but the values you are using are too small.
If you leave them off, the button should display correctly:
<Button Content="Parse" x:Name="btn_parse" Click="buttonParse_Click" Margin="180,10,180,176"/>
<Button Content="Reset" x:Name="btn_reset" Margin="180,122,180,64" Click="buttonReset_Click"/>
Note that you can do a better job of the layout if you design this yourself using a Grid or other container instead of using Margin, as well.
Remove the Height, Width and Margin properties.
Don't use the Visual Studio designer to create WPF UIs.
Take a look at http://wpftutorial.net/LayoutProperties.html
You have used height, Width property along with Margin property. Remove height and width property and it will work fine. Ex.
<Button Content="Parse" x:Name="btn_parse" Click="buttonParse_Click" Margin="180,10,180,176"/>
Related
In WinForm we can set BackColor of a CheckBox
How do I do this in WPF? I try
<CheckBox Content="CheckBox" Background="Red"/>
but this only changes the rectangle border color
I also try
<CheckBox>
<TextBlock Text="CheckBox" Background="Red"/>
</CheckBox>
but this only changes the text background color, not including the rectangle
=======
Thank you all for the solutions. I think the simplest way works for me :)
If you experiment a little with panels you get there:
<Grid Background="Red" HorizontalAlignment="Left">
<CheckBox Content="test" />
</Grid>
is pretty close to what you want.
Tried it myself ;-)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<CheckBox FlowDirection="RightToLeft" background="Red"
IsChecked="False" />
<Border Grid.Column="1"
Margin="20 0 0 0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="LightGray">
<TextBlock HorizontalAlignment="Left"
Foreground="Black"
Style="{StaticResource RegularTextblock}"
Text="Checkbox1" />
</Border>
</Grid>
You are asking for little too much. Using Blend I made created a relevant style for the CheckBox.
The code was too big. So SO did not allow to display. Here is the pastie link
For the Background there is a grid markGrid. I added a Background and a TemplateBinding to force the CheckBox to change the colour. The drawback is the Path colour will be visible very faintly if the background is dark.
I have this very simple ChildWindow:
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
<ScrollViewer Width="378">
<StackPanel>
<TextBlock x:Name="txtFracture" HorizontalAlignment="Left" Margin="10,10,10,10" TextWrapping="Wrap" VerticalAlignment="Top" Width="358"/>
</StackPanel>
</ScrollViewer>
</Grid>
My problem is that the text in the TextBlock is getting clipped on the right side. (I originally didn't have the StackPanel in there - that was just an experiment.) I have added more and more to the Margin.Right, but it doesn't help. The Scroll bar itself isn't stepping on the text, the text just drops a bunch of pixels as it gets to the right of the block. Sometimes, it isn't even whole letters that are getting clipped. See anything?
Also, if I change the HorizontalAlignment from Left to Center, I get the pixel-clipping on both sides of the block.
Also, if I remove the ScrollViewer altogether, the clipping is still there, so it isn't his fault, either.
I notice you have texblock width as constant and you need margin of 10 on all side. In this case ScrollViewer ScrollBar clips your TextBlock.
Possible solution is
1. Remove width on textblock and set alignment stretch.
try this
<ScrollViewer Width="378" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<TextBlock x:Name="txtFracture" HorizontalAlignment="Stretch" Margin="10,10,10,10" TextWrapping="Wrap" VerticalAlignment="Stretch"
Text="Testing"/>
</ScrollViewer>
Turns out that this works:
<ScrollViewer Width="378" >
<StackPanel>
<TextBlock x:Name="txtFracture" Margin="10,10,10,10" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
As far as I can tell, the actual culprit was the explicitly set TextBlock Width.
In my application I have a Window. It contains a left side menu, a header and a place for content.
This content is being loaded dynamically - a UserControl is put in there. These UserControls are various. From just a TextBlock to quite complex pages. To make sure all the content will be visible I have to wrap it with a ScrollViewer (I mean in MyWindow.xaml). It all works fine until I need to put a ListView in the content.
More or less the code looks like that:
<ScrollViewer> // this is the wrapping viewer actually it's in a different file
<UserControl>
......
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<ListView ItemsSource="{Binding Entities}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Style="{StaticResource Value}" Text="{Binding WorkOrderNumber}"/>
<TextBlock Style="{StaticResource Value}" Text="{Binding ActionType}"/>
<TextBlock Style="{StaticResource Value}" Text="{Binding StartDate}"/>
<TextBlock Style="{StaticResource Value}" Text="{Binding StopDate}"/>
<Separator/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Whatever.. Grid.Row="0" Grid.Column="1"/>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource CustomButton}" Content="Previous" />
<Button Style="{StaticResource CustomButton}" Content="Current" />
<Button Style="{StaticResource CustomButton}" Content="Next" />
</StackPanel>
</Grid>
</UserControl>
</ScrollViewer>
The result is that the listbox has no scrollbar and gets vary high. The scrollbar is only at the window's scrollviewer.
So in my UserControl I want:
the buttons always to be at the very bottom
the listbox to fill the whole space left (also to resize along with the window)
avoid hardcoding listbox's height
Is that possible?
Use a DockPanel instead of a Grid. DockPanel has a property called LastChhildFill. It is by default true. If you set your ListBox to be the last Child, it will fill all the space:
<ScrollViewer>
<DockPanel>
<StackPanel DockPanel.Dock="Bottom"
Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Style="{StaticResource CustomButton}"
Content="Previous" />
<Button Style="{StaticResource CustomButton}"
Content="Current" />
<Button Style="{StaticResource CustomButton}"
Content="Next" />
</StackPanel>
<ListView >
</ListView>
</DockPanel>
</ScrollViewer>
But this setting makes the Buttons to disappear. I mean they are always at the Bottom of the ListBox. So maybe you need to remove the ScrollViewer.
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.
I use ComboBox control as popup. Item for my ComboBox is Grid. There is TreeView control and two Buttons in grid. Items of TreeView are CheckBoxes.
When I click on Buttons or CheckBoxes drop down keeps opened, but when I click on other part of grid drop down i closed.
Is there any way to keep it opened until I click outside of ComboBox?
I have looked a lot in Google, but haven't found anything.
<UserControl.Resources>
<common:HierarchicalDataTemplate x:Key="HierarchicalDataTemplate_AddDivision" ItemsSource="{Binding DivisionIDs}">
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Click="CheckBox_Click" />
<TextBlock Text="{Binding ToDisplay}"/>
</StackPanel>
</common:HierarchicalDataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.90*"/>
<RowDefinition Height="0.10*"/>
</Grid.RowDefinitions>
<controls:TreeView Height="250" x:Name="itemsToShow" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="230"
Grid.ColumnSpan="2" ItemTemplate="{StaticResource HierarchicalDataTemplate_AddDivision}" SelectedItemChanged="itemsToShow_SelectedItemChanged" />
<Button Margin="28,0,22,5" Content="Ok" Grid.Row="1" d:LayoutOverrides="Height" Click="OkButton_Click"/>
<Button Margin="23,0,27,5" Content="Cancel" Grid.Column="1" Grid.Row="1" d:LayoutOverrides="Height" Click="CancelButton_Click"/>
</Grid>
And this is ComboBox
<ComboBox Grid.Row="1" Width="100" Height="20" HorizontalAlignment="Left" VerticalAlignment="Top" >
<ComboBox.ItemTemplate>
<DataTemplate>
<my1:ShowDivisions x:Name="ShowDivs" Loaded="ShowDivs_Loaded" ParentComboBox="{Binding ElementName=addStr2}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
It sounds like your buttons are not filling all the space in the dropdown part of the ComboBox.
In that case you just need to have a a clickable object behind the buttons to eat any stray mouse clicks:
Try a rectangle with the background set to Transparent (not just a colour with 0 alpha value, as that is not clickable).
(Make sure the rectangle has IsHittestVisible set as well).