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.
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!
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
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.
In a WPF application I'm developing, I intend to have a number of buttons on the left in a separate grid, however, when I resize the application (making it smaller) the button shrinks and eventually disappears.
I know there's obviously something I'm overlooking, but I can't find out what it is.
Here's the XAML for that grid:
<Grid HorizontalAlignment="Left"
Margin="0,23,0,0"
Name="pnlNav"
VerticalAlignment="Stretch"
Width="200">
<Button Content="Team Open"
Height="31"
Name="btnTeamOpen"
Width="144"
Click="btnTeamOpen_Click"
Margin="26,44,30,533" />
</Grid>
Your button has a ridiculous margin: Margin="26,44,30,533"
This means the button has to be over 500px from the bottom, clippling occurs if the available space is smaller than the top margin + height + bottom margin.
(MSDN article on the layout system & Alignment, Margins & Padding)