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?
Related
I am trying to make responsive WPF app which shows image. One of the program's functionalities is selecting a piece of an image by clicking and draging the mouse. I use Point p = e.GetPosition((IInputElement)sender); to find cursor position, and I found out I cannot use Stretch="Fill" because it causes the MouseUp cursor to select a little lower than it should and MouseMove is also inaccurate (I have to drag the mouse a lot further than I should). On the internet, I found the reason for this behavior that you cannot use Fill and have to use None instead. However, the image is much smaller without Fill.
This is my XAML:
<Grid Grid.Row = "1"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment= "Top"
Margin="0,30,0,0">
<Image x:Name= "image1"
Grid.Row = "1"
Grid.Column="1"
Cursor="Cross"
MinWidth="300"
MinHeight="300"
MaxWidth="512"
MaxHeight= "512"
Stretch = "None"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased"
VerticalAlignment="Top"
MouseDown="picOriginal_MouseDown"
MouseMove="picOriginal_MouseMove"
MouseUp="picOriginal_MouseUp" />
</Grid>
I don't know how to embed my image so that in the window view it fills the grid without this Fill property and at the same time is responsive for fullscreen. Should I wrap Image with something else from the WPF toolbox?
I find it easier using the background of the picture box to be the image then use the stretch in that. Alternatively, you could use the image with any of the other options, try using the the properties tab, here are the other stretch options tho: None, Fill, Uniform, UniformToFill
Tell me if this helps, tryna get rep, thanks!
XAML:
<Grid Height="22" VerticalAlignment="Top" Background="#FF1368BD" >
<Button x:Name="ButtonPowerOff" HorizontalAlignment="Right" Height="22" Width="22" Background="{x:Null}" BorderBrush="{x:Null}" Click="ButtonPowerOff_Click">
<materialDesign:PackIcon Width="15" Height="15" Kind="WindowClose" HorizontalAlignment="Center" Margin="0 0 0 0" ></materialDesign:PackIcon>
</Button>
</Grid>
You can try setting the height and width of the button to "auto" and also set the padding to "0" in the button. Also delete the HorizontalAlignment of the icon.
I don't know what library is PackIcon, and that's is important because I don't know it behaviour. But I can tell...
Why do you set the PackIcon size if you have set the Button size?
The problem here is button maybe has default padding making the "effective content" size of the button smaller than image, and the image is doing what you want but "the space needed is greater than i have".
Let the image stretch in the button (without setting the size of it) or let the button fit the image 15x15 size (without setting the size of the button).
Everything in WPF is ready for sizeless/locationless layout. Except Canvas children, of course; and some bizarre behaviour of Image control.
If you can avoid use Width and Height in your controls (sometimes you can't) you should do it. Instead use margins, alignments and paddings. This way you let the window and controls be totally responsive.
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
I have a simple StackPanel on a grid and I want buttons within that stack panel to take up all space available (space between them should be the same).
In case it's not clear, there's a pic:
<StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="10" Orientation="Horizontal">
<Button MinWidth="115">OK</Button>
<Button MinWidth="115">Cancel</Button>
<Button MinWidth="115">Cancel</Button>
</StackPanel>
Is it possible or do I have to just enter margins manually?
Thanks!
Make your StackPanel into a Grid instead (you'll need to refactor what you currently have slightly), and evenly space out all of the columns (using a width of *), and then set each button's alignment to left/center/right respectively, which will achieve the layout you're looking for.
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.