I am trying to create a floating button in my WPF application. Currently, I have the following:
<Grid>
<Button Style="{DynamicResource MetroCircleButtonStyle}" Background="#E0E010" Width="50" Height="50" Name="testBtn" Click="testBtn_Click" Margin="374,184,93,35">
<Rectangle Height="20" Width="20" RenderTransformOrigin="0.47,0.456">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_add}" />
</Rectangle.Fill>
</Rectangle>
</Button>
<ListBox Width="200" Height="200" Name="lbox1" BorderBrush="Black" BorderThickness="5">
<Grid Width="175">
<ScrollViewer CanContentScroll="False" VerticalScrollBarVisibility="Auto" Margin="107,0,0,0"></ScrollViewer>
</Grid>
</ListBox>
</Grid>
which has a list box with a scroll viewer and a button outside the list box. When I click the button it prints "Hello World" in the list box. I would like to add the button inside the list box and as I scroll down inside the list box have the button be floating. Is there any way to do this?
Note: I am a complete beginner when it comes to WPF.
EDIT: Here is essentially what I want:
So going off of #omarmallat's comment, the way to do this is
<Button x:Name="addRowButton"
Width="50"
Height="50"
Margin="1275,330,25,25"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Background="#2EFF00" />
I had a margin so the button wasn't directly in the corner and provided a little but of space. Make sure the button tag is inside your grid tag!
Related
I am trying to make a button in WPF that will show progress but still have its button text visible.
I tried adding a Grid as a child to the button and adding a ProgressBar and Label to the grid, thinking the Grid will fill the button and using VerticalAlignment="Stretch" HorizontalAlignment="Stretch" on the progress bar and label will get me, basically, a clickable progress bar, that can show progress and have a label on top of it. However, I'm having problem with the sizing.
This is my XAML:
<Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
<Grid>
<ProgressBar Value="10" Maximum="20" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Label Content="asd2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</Button>
This is what I see:
If I change to explicit sizing:
<Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
<Grid>
<ProgressBar Value="10" Maximum="20" Width="100" Height="30" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Label Content="asd2" Width="100" Height="30" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</Button>
I get this:
Which, visually, is an improvement, but XAML-programatically is worse, since I want the button to resize with the window, if the user can't see it well or something like that. Also, visually - I don't like that little border between the actual button and the start of the progressbar and I've tried setting both "padding" and "margin" to 0, it's not from that.
What I'd like to see - the progress bar taking up ALL the space of the button and the label text staying centered both vertically and horizontally, with respect to the total size of the button.
Put your <Grid> inside of a ControlTemplate and override your <Button.Template>:
<Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<ProgressBar Value="10" Maximum="20" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Label Content="asd2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
What you were doing before is putting your <Grid> inside of the Button's ContentTemplate, not its Template. The problem with the ContentTemplate is that it has some of the default button's styling, such as the little border you don't like. By moving it to the Button's overall Template, you're saying I don't care about how the default button looks, I want it to look exactly like THIS.
What it can look like:
What it can look like if you resize the window:
I'm reading through a WPF book, running through the examples.
Now, I'm working on some buttons.
Within the <Button.Content> </Button.Content> tag, I am able to define the text for the button, or I am able to define a shape that appears on the button face, but I don't appear to be able to do both within the same button.
Here's an example of the button with the ellipse shape on its face:
<Button Background="Blue">
<Button.Content>
<Ellipse Height="40" Width="40" Fill="Green" />
</Button.Content>
</Button>
Here's an example of the button with the text defined:
<Button Background="Red">
<Button.Content>
OK
</Button.Content>
</Button>
Here are the results of these two button definitions (within a WrapPanel):
When I attempt to create a button that defines both properties, using this code:
<Button Background="Orange">
<Button.Content>
OK
<Ellipse Height="40" Width="40" Fill="Wheat" />
</Button.Content>
</Button>
I receive an error that explains: The property 'Content' is set more than once.
So My question is: is it possible to combine these two button content definitions? The goal is to define a button that displays an ellipse shape and text.
You can only set the Content to one element, but you could do this by placing your elements inside of one container, e.g.:
<Button Background="Orange">
<Button.Content>
<Grid>
<Ellipse Height="40" Width="40" Fill="Wheat" />
<TextBlock Text="OK" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
You are in fact setting the content twice, as you are trying to place two controls.
Try using a Stackpanel to hold both your controls. Also put the "OK" in a Label or Textbox
Example:
<Button Background="Orange">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Label Content="OK" Background="Red"/>
<Ellipse Height="40" Width="40" Fill="Wheat" />
</StackPanel>
</Button.Content>
</Button>
I have a problem on how to correctly set the Panel.ZIndex of a Popup inside a Grid. The goal is that when I click the Emergency button, a Popup window will display with an image on it and overlay (cover) the buttons (see screenshot below).
I have set the Grid Panel.ZIndex="0"and the Popup to Panel.ZIndex="1" However, the Popup window doesn't overlay the buttons.
This is the XAML implementation.
<StackPanel Background="Black">
<Grid Background="#253341" Panel.ZIndex="0">
<Popup HorizontalOffset="-5" VerticalOffset="0" IsOpen="False"
HorizontalAlignment="Left" VerticalAlignment="Top"
Name="EmergencyPopup" Placement="RelativePoint" AllowsTransparency="True"
PlacementTarget="{Binding ElementName=EmergencyButton}"
Width="1080" Height="1920" Panel.ZIndex="1">
<Border BorderBrush="Black" BorderThickness="2" CornerRadius="2">
<Grid>
<Image Source="{StaticResource EdenParkInfoImg}"/>
<Label FontWeight="Bold" Foreground="Red" HorizontalAlignment="Right" FontSize="25"
MouseLeftButtonDown="Label_MouseLeftButtonDown">close X</Label>
</Grid>
</Border>
</Popup>
</Grid>
</StackPanel>
Screenshot of the Popup window and buttons (the red box indicates that the image inside the Popup is behind the buttons)
Have I correctly set the Panel.ZIndex of the Grid and Popup? What is the correct way of doing it?
Any help is greatly appreciated.
I did find a way on how to solve the issue. In my Popup dialog xaml implementation, I set HorizontalOffset to 0 and VerticalOffset to 180. In that way, Popup dialog vertically overlays the buttons and ZIndex no longer matters. WPFUser is right, it should work without explicitly defining ZIndex.
<Popup HorizontalOffset="0" VerticalOffset="180" IsOpen="False" Width="1080"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="1920"
Name="EmergencyPopup" Placement="Top" AllowsTransparency="True">
<Border BorderBrush="Black">
<Grid>
<Image Source="{StaticResource EdenParkInfoImg}" />
<Label FontWeight="Bold" Foreground="Red" HorizontalAlignment="Right" FontSize="25"
MouseLeftButtonDown="Label_MouseLeftButtonDown" Margin="0,0,15,0">close X
</Label>
</Grid>
</Border>
</Popup>
I'm developing an UWP app and i'm trying to add two buttons and a textblock for each image that binded.
I'm binding the images in XAML like this; (Updated with the full code)
<GridView Name="display"
Margin="30,100,30,5"
Foreground="#FFFFFF"
IsItemClickEnabled="True"
ItemClick="display_ItemClick"
ItemsSource="{Binding}">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Width="240"
Height="240"
Source="{Binding Path=Image}" />
<StackPanel Name="buttonPanel"
Orientation="Horizontal"
Margin="0,-45,10,0"
HorizontalAlignment="Center">
<Button Name="button_minus"
Content="-"
Width="40"
Height="30"
Click="eksi_click"
FontWeight="Bold">
<Button.Background>
<ImageBrush ImageSource="Assets/btn2.png" Stretch="Fill" />
</Button.Background>
</Button>
<Border Background="White" CornerRadius="10" Height="30">
<TextBlock x:Name="popupNumber"
Width="50"
Height="25"
Margin="0,6,0,0"
Text="{Binding Path=numberOfCopy}"
TextAlignment="Center">
</TextBlock>
</Border>
<Button Name="button_plus" Content="+" Width="40" Height="30" Click="artı_Click" FontWeight="Bold">
<Button.Background>
<ImageBrush ImageSource="Assets/btn2.png" Stretch="Fill" />
</Button.Background>
</Button>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I added a stackpanel that contains the Buton-TextBlock-Button format in the seciton of code that i commented out. When i do this, some buttons are not working and i don't actually know is it the best way to do my task.
When i launch the program, some buttons are not available to click. I can see them in the UI but i can't click them. The most awkward thing is only in a specific area on the UI, buttons are unavailable.
My click events are just fine, i have some binding issues, i am wondering is it the proper way to to something like that. Is it the way i am using causes the binding problem?
In in each TextBlock the values should be different for each image and i can't access buttons and textblocks in .cs file because they are in DataTemplate. So i might be doing this in a wrong way.
So do you have any solutions for adding buttons and textblocks for each binded image in Datatemplate? I'm not sure my way is the best way.
Any help would be greatly appreciated.
Thanks.
I would like to create a toolbar like this on wpf.
What i need to use in order to create the area with the button circled in red ?
Is it possible with the microsoft toolbar ?
For the moment i tried this :
Here is my xaml code :
<ToolBarTray Background="#008ede" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="33" >
<ToolBar ToolBarTray.IsLocked="True" Background="#008ede" HorizontalAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Center">
<Button Name="tbrClear" ToolTip="Clear" VerticalAlignment="Center">
<Image Source="_XWPF_TBR_PREMIER.PNG_IMAGES.png" Name="Image1"></Image>
</Button>
<Button Name="tbrClear_" ToolTip="Clear" VerticalAlignment="Center" VerticalContentAlignment="Center">
<Image Source="_XWPF_TBR_PRECED.PNG_IMAGES.png" Name="Image2"></Image>
</Button>
</ToolBar>
</ToolBarTray>
1) First, i would like to know how centered the button, i add the verticalAlignment="Center", but nothing is center. Have you an idea please?
2) Secondly, how remove or hide the little rectangle white on the right please ?
3) Then, anyone know how it's possible to recreate the area circled on red please ?
Thanks a lot :)
Best regards
Your tool bar looks centered. do you mean you want the toolbar to be where the caption/title is or do you want to hide the caption title? for the latter you can try WindowStyle="None" in your window.
As for for the 'little rectangle" try getting and setting OverflowGrid visibility property of the toolbar.
you probably also need to wrap the elments in aborder and use the corner radius to achieve the rounded corners. here's an example:
<DockPanel Height="40" VerticalAlignment="Top">
<Border BorderBrush="LightBlue" BorderThickness="1" CornerRadius="8" Margin="1" Background="#008ede">
<ToolBarTray Background="#008ede" HorizontalAlignment="Left" VerticalAlignment="Center" >
<ToolBar ToolBarTray.IsLocked="True" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Center">
<Button Name="tbrClear" ToolTip="Clear" VerticalAlignment="Center">
<Image Source="_XWPF_TBR_PREMIER.PNG_IMAGES.png" Name="Image1"></Image>
</Button>
<Button Name="tbrClear_" ToolTip="Clear" VerticalAlignment="Center" VerticalContentAlignment="Center">
<Image Source="_XWPF_TBR_PRECED.PNG_IMAGES.png" Name="Image2"></Image>
</Button>
</ToolBar>
</ToolBarTray>
</Border>
</DockPanel>