My xaml application is not filling up my screen when I debug it.
As you can see my buttons are displayed at the bottom.
After debugging the app the buttons are now half way up.
This is the positions that xaml has set as default, both are at auto auto.
Instead of using Auto, use Bottom for both.
If your buttons are in a stack panel, you can lock (anchor) the stack panel to the bottom of your LayoutRoot and set the height of the stack panel to a height close to the height of your buttons. Then, I would look at setting the LayoutRoot width and height to auto.
You can also configure your grid with rows and cols along with their dimensions.
try this xaml:
<Grid>
<StackPanel HorizontalAlignment="Center" Margin="0,278,0,0" Width="517" Orientation="Horizontal" Height="50" VerticalAlignment="Bottom">
<Button Content="Button"/>
<Button Content="Button"/>
</StackPanel>
</Grid>
On your grid you'll see little locks positioned at the center of ever side of the grid.
If you add an object and move your mouse along the locks your cursor changes to a hand pointing a finger icon. If you click on the lock at that point, you'll see the lock either locks or unlocks. (i.e. you'll see a larger gap between the lock lines). It helps maintain the anchor position of the object when resizing the screen.
This is a screenshot with the stack panel selected. Notice that only the bottom anchor is locked.
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'm working on updating previously working app. Testing shows the ScrollViewer acting oddly when the Zoom makes part of the contained images fall off the screen. The original app was created with VS 2013 as a Universal Windows app. The new app is created with VS 2015 as a Universal Windows app though the target build has been shifted to the anniversary release.
My XAML is defined so:
<ScrollViewer x:Name="SV1" Grid.Row="1" HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
SizeChanged="SV1_SizeChanged" ZoomMode="Enabled" >
<StackPanel x:Name="ImagePanel" Orientation="Horizontal" HorizontalAlignment="Center"
VerticalAlignment="Top" >
<Image x:Name="ImageLeft" Stretch="Uniform" />
<Image x:Name="ImageRight" Stretch="Uniform" />
</StackPanel>
</ScrollViewer>
The user can change the ZoomLevel of the ScrollViewer. The zoom change is implemented using SV1.ChangeView(null, null, zoomFactor).
The images visibly change size on the screen, but as they fall off the right or bottom the scrollbars don't appear. Even changing the visibility properties to "Visible" instead of "Auto" doesn't cause the scrollbars to appear. When the size changes and for a brief instant a thin line will appear where the bars should be and then disappear. Additionally, user input that would normally scroll like moving the mouse wheel does nothing.
Based on other commentary, I've tried replacing the StackPanel with a Grid with no apparent effect.
I'm drawing a blank. Any ideas?
It appears the answer is the next control which shares the same visual space needs to be set to Visibility="Collapsed" in the XAML. The visibility is controlled programmatically, but without the XAML tag the scrollbars of the previous control don't appear and with the tag they do.
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.
(Can't add pictures so I'll try and explain it) So my program basically consists of two parts: a bitmap image that is scanned and shown in the main window (on a canvas), and a canvas derived class I made that basically takes data (b&w values ranging from 0-255) from the image and represents it in a histogram format (a bargraph basically) and it overlays the bitmap image (its transparent so you can still see the image).
Alright so I got my program working, the only problem is my canvas derived class wont stretch until I "refresh" the screen. The children of the class (being windows shapes rectangles) wont stretch with the window.
It looks fine up to this point
but then I maximize it...
The rectangles then just stay exactly where they're at. It isn't until I click the "display histogram" button that it will disappear and then after clicking it again, I get...
...Exactly what I want, the histogram is in the right place on the screen. So here's my question, how can I get the histogram to stretch with the main window? instead of having to refresh it every time?
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Black" BorderThickness="5" x:Name="testview">
<local:DrawingCanvas x:Name="pbHistogram" IsHitTestVisible="False"
Width="Auto"
Background="Transparent"
Height ="{Binding Path=ActualHeight, ElementName=testview}"/>
</Border>
I know this is not really an answer, but I think the problem is the canvas class itself. It has no automatic layouting or resizing of its child elements. Link to msdn: http://msdn.microsoft.com/en-us/library/ms609101(v=vs.100).aspx
What you could try is to hook up to your main window's resize event and call the same function that the buttonpress calls.
Maybe the quickest, easiest way to do this would be to put your canvas in a Viewbox.
Right now I have a DockPanel that contains a toolbar and BrowserWindow. When I re-size the BrowserWindow to fit content, I want that change to propagate up into the DockPanel and re-size automatically. Is there a setting for this?
So the layout of my app is essentially:
-Browser Control Class
--DockPanel
----Toolbar (docked to Top)
----Browser Window Class
------Grid
--------Menu
--------Embedded Browser
Basically I want the size that I set on my Browser Window Class to automatically re-size the DockPanel.
Before applying size to Browser Window:
After applying size to Browser Window (I want to get rid of that extra space surrounding the embedded browser):
DockPanel has a LastChildFill property that you can use. Try to play with it a little. Remember that BrowserWindow needs to be the last child in DockPanel.
I think you will also have to change something in your Grid. By LastChildFill property should be set. You are on right track at least.
Change your DockPanel to a StackPanel, put it inside a Grid, and set it's HorizontalAlignment and VerticalAlignment to Center
You might also need to play with the the Height/Width of the WebBrowser to specify the initial size
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Menu />
<WebBrowser Height="SomeValue" Width="SomeValue" />
</StackPanel>
</Grid>
Can't you specify Width="Auto"?