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
Related
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.
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?
I’m trying to use a Wingdings symbol as a graphic in a control and am trying to make it vertically centered within a textbox (UWP app.) I’m putting a visible boarder around it and the fact that the symbol is not vertically centered is noticeable and ruining what I’m going for. If it’s possible it saves me from having to do custom art and the since the Wingdings are resizable my graphic could be somewhat easily rescaled. That's why I don't want to manually adjust the height until it looks centered.
Most the Wingdings aren’t vertically centered but are sometimes used as graphics so I’m wondering if this is doable w/ reasonable effort. A slick xaml way to do this would be ideal but a font metric measuring and then textblock height adjusting tack would be good.
Here’s an example of the problem. The hard drive symbol is not vertically centered in the border.
<Border BorderBrush="Black" BorderThickness="10" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text=";" FontFamily="Wingdings" FontSize="230"/>
</Border>
EDIT - changed example to declutter and to use Wingdings hard drive symbol because the skull&bones is close enough to vertically centered to confuse the question. The drive symbol is very clearly not vertically centered. My goal to automatically vertically center it even as the font size changes. I can see how XAML may not be able to do this but I'm wondering if some font/text metrics querying exists that I could use to do it.
EDIT 2 - Adding a picture (from above XAML which has the same issues as all the suggested XAML(s):
I'm trying to get the center of the symbol to be at the center of the textblock
The skull & bones is not vertically centered in the border.
Actually by default the skull&bones text should be vertically center. The reason for why your code make it looks not vertically is that the font size is too larger to be inside the border, since Border's height is restricted to 200. So the exceed parts of TextBlock you will not seen which may looks like it is not vertically center.
How to vertically center a wingding character in textblock xaml / C# / UWP
There are several ways to do this, choose which way depend on your prefer.
Remove the height and width properties for the Border control you will see the text vertically center.
<Border BorderBrush="Black" BorderThickness="10" Background="White" HorizontalAlignment="Center">
<TextBlock x:Name="textBlock" Text="N" FontFamily="Wingdings" FontSize="230" />
</Border>
Add a ViewBox control outside the TextBlockcontrol. ViewBox can stretch and scale a single child to fill the available space. This will let your text looks always be center no matter how large is the font size. The text size will depend on the size of Border control. Code as follows:
<Border BorderBrush="Black" BorderThickness="10" Height="200" Width="175" Background="White" >
<Viewbox>
<TextBlock x:Name="textBlock" Text="N" FontFamily="Wingdings" FontSize="230" />
</Viewbox>
</Border>
Just use a TextBox control instead of the component of Border and TextBlock. This will reach the same effects that make the text always center and no matter what is the font size. Pay attention that don't set fixed height and width for the TextBox and also make the TextBox read only. Code as follows:
<TextBox
x:Name="textBox"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="Black"
BorderThickness="10"
FontFamily="Wingdings"
FontSize="230"
IsReadOnly="True"
Text="N"
TextAlignment="Center" />
I got a pretty weird behavior of my WPF application: the XY position of my button on runtime seems to be divergent to that when I set it in my xaml-Editor of Visual Studio (is there a name for it btw?)
It has no alignments set or panels around it, i have only set it by margins. My button has the following code:
<Button Content="OK" Height="23" Margin="213,319,4,7" Name="button3" Width="75" IsCancel="True" Click="button3_Click" IsEnabled="False" />
Edit:
The margins are fixed because it is a non-resizable dialog. As you can see, the button's slightly moved to the left and up:
xaml-Editor:
Runtime:
Why is that and how can I fix it?
I guess the below link about the Alignment, Margins, and Padding Overview will help you to understand how it is works?
Else place a panel wrappers such as Stackpanel, Wrappand or Grid. It's suitable to work the layout of the controls
EDIT : The problem was with the ResizeMode="NoResize". If you remve this attribute in Window tag, then alignment would be good
Link to Refer
Man, that's the worst way to set the position of a UI element in WPF!
Refactor your XAML to something like this:
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" Name="TableList" Margin="5"/>
<Button Grid.Row="1" Name="button3" Content="OK"
Margin="5"
Width="75"
HorizontalAlignment="Right"/>
</Grid>
You see? There is a Grid that handles the position of all its children (in this case, a ListView and a Button).
The Button is put on the second Row, aligned to the right (HorizontalAlignment property).
Both the Grid and its children have Margin=5. This guarantees that the margin of every children is equal respect to the adiacent children and to other controls outside the Grid.
Also, the ListView and the Button are perfectly aligned.
The problem with your approach is that you set the Button Width and its Left Margin and its Right Margin. Maybe the total is not correct because the border of the Window eats some pixel, or simply WPF can't handle all the informations together and misses the calculation, who knows, but the consequence is that you must leave at least one parameter free. In my example, I left free the Margins from the Window. The Margin=5 sets only the relative Margin respect to the other controls, but how much the Button is distant from the left border of the Window is something I leave to the WPF graphical engine to calculate.
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.