When you add a checkbox to a window and center it vertically, superficially it seems it is OK. However when you increase the padding you notice something odd -- the label part of the checkbox is centered indeed, but the check box remains in the left-top corner. So with enough padding you will get such result
[ ]
this is my checkbox
So, question is -- how to align check box of the checkbox properly?
Edits
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<CheckBox Name="XSwitchCheckBox"
VerticalContentAlignment="Center"
VerticalAlignment="Center"
Padding="4">X-axis switch</CheckBox>
</StackPanel>
<Image DockPanel.Dock="Bottom" Name="pictureBox1"></Image>
</DockPanel>
I am not able to reproduce your issue. Are you setting the All property of the Padding property or are you setting the Left property? You may also want to try adjusting the Margin property.
With a Left Padding on my small form my checkbox looks like:
[] checkbo
x1
You may also try, Padding="2,0,0,0" in which you should see the entire checkbox move. I believe in your code you may be setting your padding to a value greater than the space available.
Hopefully this will help you clear this up.
VerticalContentAlignment="Center" worked for me.
Note: VerticalAlignment="Center" does not work since it refers to the control itself, not the contents of the control.
Thanks to Antoine Meltzheim for this answer.
The checkbox layout is done using the BulletDecorator Class. It looks like the padding you are setting is getting applied to the bullet child, not to a container which contains the bullet and the child.
Related
The icon is not aligned by default in the DropDownButton. How can I horizontally align the icon?
I am using MahApps.Metro v1.6.5 and MahApps.Metro.IconPacks v2.3.0.
I have tried to set Padding, HorizontalAlignment and VerticalAlignment for the button, but it didn't solve the problem.
<controls:DropDownButton ArrowVisibility="Hidden" ItemsSource="{Binding MenuItems}" BorderThickness="0" Focusable="False">
<controls:DropDownButton.Icon>
<iconPacks:PackIconEntypo Kind="Menu" VerticalAlignment="Center" HorizontalAlignment="Center" />
</controls:DropDownButton.Icon>
</controls:DropDownButton>
Screenshot: https://i.ibb.co/4NhXZ8S/Untitled.png
I am trying to align the icon inside DropDownButton, but can't remove the padding (you can see it on the screenshot).
Okay, I found the problem. It was arrow, which is visible by default:
https://i.ibb.co/CQmZn3p/Screenshot-22.png
It occupies the space for itself even if it is hidden (ArrowVisibility="Hidden"). In this case ArrowVisibility="Collapsed" should be used instead, it solves the problem.
I have a grid of many checkboxes, they are 70 height and 47 width. For a single checkbox, I want the checkbox's check mark box to stay visible and fully opaque on top of whatever is within the checkbox itself. In this case the only content of the checkbox will be an image (it is the same size 70height 47width) that is moved so that it lines up with the whole box. However the image's opacity covers the check mark box.
As of right now I have this (it isn't what I want so much as shows the problem). The opacity of the image is there so you can see the image and checkbox. The margin puts the image over the whole checkbox
<CheckBox Grid.Column="0" Grid.Row="1" Opacity="1" BorderThickness="0" Unchecked="CheckBoxChange" Checked="CheckBoxChange" TabIndex="7" IsTabStop="True">
<Image Source="Resources/1.png" Width="47" Height="70" HorizontalAlignment="Right" Stretch="None" VerticalAlignment="Center" Margin="-18,1,0,0" Opacity=".4"/>
</CheckBox>
If you do a similar format of this for a button it works fine but I need try this with checkbox because it far better fits the use of the function needed.
Is there a way to do what I've explained or do I need to make something custom?
What I want is to have a page with a Textblock in the middle. Also I want the page to be clickable (as in you should be able to click anywhere on the entire page and the function will be called).
What I've tried is to have the TextBlock in a Viewbox and to set stretch to full, but that made the textblock text out of proportion. And if I set it to Uniform it only takes up however much space it needs. So either way it doesn't work.
Also the textblock needs to automatically resize itself when the page gets bigger / smaller (i.e. set Height and Width to "Auto"), I've tried a lot and nothing works, so any help is appreciated. Below is what I currently have.
<Viewbox x:Name="MainViewbox" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="1, 1, 1, 1">
<TextBlock x:Name="MainTextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" Text="6" Height="Auto" Width="Auto" Foreground="LightSkyBlue"/>
</Viewbox>
This Almost works but I can only click on the six, not on the whole screen.
Anyway thanks in advance!
Figured it out!
All I had to do was add a pointerReleased event handler to the page, rather than the Viewbox
When vertically scrolling into view, I can pull the last row into view, but on releasing the drag, the last row springs back (partially) out of view. I think inaccuracy of measure can be attributed to a grid that I'm using as the listbox's header but I'm currently unable to fix this to that they work together correctly.
<Border>
<StackPanel>
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto">
<StackPanel>
<Grid x:Name="_headers"/>
<ListBox x:Name="_dataGrid"/>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Border>
**Update
This example removes the scroll and also suffers from the same truncated row problem as the example above. The header grid row also doesn't scroll horizontally with the listbox rows which is an even bigger problem for my solution.
<Border>
<StackPanel>
<Grid x:Name="_headers"/>
<ListBox x:Name="_dataGrid"/>
</StackPanel>
</Border>
It's because you put ScrollViewer inside StackPanel. StackPanel doesn't limit control's size so the ScrollViewer can grow forever and never scroll properly. Its size must be limited. Grid can do it perfectly (if only the height of the row is set to *, not Auto).
Also, in my opinion you shouldn't put ListBox inside ScrollViewer, because ListBox already has its own scroll feature.
Never ever use a ListBox inside a ScrollViewer, you will run into scrolling conflicts.
As far as I can see, you need to add a header to your list. LongListSeelctor might be the best option, since it has got a Header property (also Footer):
See: http://www.geekchamp.com/articles/the-new-longlistselector-control-in-windows-phone-8-sdk-in-depth
I am trying to learn WPF, but I have reached an impasse. The problem is that I have a control derived from UIControl, relevant parts:
<Grid>
<Border x:Name="OuterBorder" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="2" BorderBrush="Black">
<Canvas x:Name ="InternalCanvas" Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Ivory">
</Canvas>
</Border>
</Grid>
This gives me a little black dot, when I render the control; I assume this is the border.
I then add code to the constructor after InitizializeComponents:
Label l = new Label();
l.Content = "HELLO";
l.BorderThickness = new Thickness(2);
l.BorderBrush = Brushes.Bisque;
if (this.GetType() == typeof(SO.SOGraphNode))
this.InternalCanvas.Children.Add(l);
The intent of the code is that if the class is not inherited, it should show some kind of placeholder. Which it does.
The problem is that InternalCanvas and it's ecplipsing OuterBorder won't resize around the newly created nice label.
The border remains a dot-border and InternalCanvas' Ivory background is not seen behind the label.
I have googled this alot, beliving that I needed to refresh or update the canvas/control elements, but I'm not so sure anymore. Mainly through watching a lot of Dispatcher.Invoke variations, which I have applied very liberally through out the code at different points, every time with no change in behavior.
WPF is a bit oblique to me still, if anyone knows how I could resolve this problem I do indeed have a shiny "Correct Answer" to dole out. :)
Edit 1 - Screenshot of the results:
Notice the general lack of Ivory background and OuterBorder still remains a small artifact in the topright corner of the control while the childelement is obviously much larger.
Is it important for you that the "InternalCanvas" element is type of canvas?
Because if you use for example a Grid instead, the sample works fine:
<Border x:Name="OuterBorder" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="2" BorderBrush="Black">
<Grid x:Name ="InternalGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Ivory">
</Grid>
</Border>
edit:
The reason for this behaviour you can read in the remarks section in MSDN:
Canvas is the only panel element that has no inherent layout characteristics. A Canvas has default Height and Width properties of zero, unless it is the child of an element that automatically sizes its child elements. Child elements of a Canvas are never resized, they are just positioned at their designated coordinates. This provides flexibility for situations in which inherent sizing constraints or alignment are not needed or wanted. For cases in which you want child content to be automatically resized and aligned, it is usually best to use a Grid element.
Can you show us how it rendered? I tried your xaml in a new project and I can't figure out what the problem is