How can I be able to place buttons over windows border.What I am trying to do is to place close and minimize buttons over the border in a WPF application in c#.Any one could please tell me how to do that.
The word 'Border' in the context of WPF may have two meanings. It may be the <Border> element, or it is possible you mean the area the defines the <Window> element. Which one is it?
If you just want to have a buttons on a <Border> element, just put it as the content of the element. If you have more than one buttons, you need to have a panel (e.g. <StackPanel>).
You cannot draw anything beyond the client area of a <Window> element. To have buttons outside the Window area, you should another Window (say 'toolwindow') with the buttons that you want. Most likely you want this toolwindow without caption and non resizable border: WindowStyle="None" ResizeMode="NoResize". Then, keep the tool window position in sync with your main window (best thing would be to bind the Left and Right properties of both Windows to Left and Right properties in a common data context. Don't forget to declare the Binding mode to BothWay).
EDIT (follow clarification from #Sarita):
So it is the first. By Content I meant the body of the XML element. Technically, it is the Child property of the Border element. The following two XAMLs are equivalent:
<Border Background="Green" Padding="5">
<StackPanel>
<Button>A</Button>
<Button>B</Button>
</StackPanel>
</Border>
<Border x:Name="Bord" Background="Green" Padding="5">
<Border.Child>
<StackPanel>
<Button>A</Button>
<Button>B</Button>
</StackPanel>
</Border.Child>
</Border>
Related
I am trying to set up an element within a WPF application, but cannot get the TextTrimming on the TextBlocks to work properly. This is within a ScrollViewer. I am currently using a DockPanel as the inner container.
I have searched quite a bit, but found no questions addressing this issue.
The XAML for the container:
<Grid>
<ScrollViewer>
<DockPanel Name="listedCharacters" LastChildFill="False"></DockPanel>
</ScrollViewer>
</Grid>
The XAML for the child elements (added by code):
<UserControl …>
<Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding FullName}" TextTrimming="CharacterEllipsis" />
</Grid>
</UserControl>
The first problem is that whether I use the DockPanel or a StackPanel, as the inner container, the child element's width appears to be dictated by its content (the TextBlocks) rather than constrained by the parent ScrollViewer.
The effect I want is for the ellipsis to truncate each TextBlock's content when the Window's grid column (not shown in code) is narrower than the bound text. Basically, a list that scrolls vertically when needed, and trims horizontally (which I thought would have been sufficiently common that the answer would be out there; alas, no).
I believe I need to use my own UserControl for this, as there is a lot more going on than shown her; right-click menus on the item in the list, etc.
The secondary issue, iff the optimal panel to use is the DockPanel, how to apply the DockPanel.Dock="Top" through code (C#) when the elements are dynamically added? Again, I cannot find anything that appears to explain this. (I know it is probably in the wrong place in the sample code above.)
I want to create following form but problem is there when I'm setting the margin with negative value then it will not work and hide my cross image. Is this possible to create as it is? or any other way to create this form.
My need:
(in below image black area is transparent)
But now show my form like below image:-
Please let me know appropriate way.
You can't draw outside of your application, without using Adorners or Popups, as Akku says in the comments.
But what you can do is to, instead of making margins negative, make them positive. So that your content (the gradient background), have a margin of 10 or 20 (or whatever number that produces the right amount of spacing.
<Window (.....) AllowsTransparency="True" WindowStyle="None">
<Grid>
<Button VerticalAlignment="Top" HorizontalAlignment="Right" Height="15" Width="15"/>
<Border Margin="15">
<YOUR_CONTENT>
</Border>
</Grid>
</Window>
I have an animation problem that I'm not sure how to Google or find a solution for. I'm trying to basically create a wrapping Marquee. I do this by having the following within a canvas:
|---Section A---|---Section B---|Section C---|
The animation begins with the left side of section B on the right side of the screen, and ends when the right side of section B hits the left side of the screen. Sections A and C are a mirror image of Section B, which creates the "wrap around" effect. When the animation ends, I move everything to the right the exact width of Section B. To the user, nothing appears to have happened .. it's all just wrapping around.
The problem is this ... some of the items in the marquee can be hidden, or can change size. So if you hide an item, the item is hidden from all three sections. Since things are being hidden in Section A, and all the sections are sized dynamically, the entire marquee moves to the left.
Is there any way to "anchor" the animation at a spot, say, in the middle of Section B, so that when items are hidden in section A, it doesn't slide sections B and C over? Instead, I want Section A to move right to fill in the space.
Edit: Let me rephrase ... because this is confusing.
I have a canvas, which contains a stackpanel, which contains three more stack panels. These three stack panels are actually copies of the same information, which gives the illusion of a marquee that wraps around when I animate. When items are added/removed in the marquee, those items in the stack panel change, which adjusts the overall size of the stack panel, which adjusts the size of the canvas. What I'd like to know, is if I can "anchor" a specific location within the stackpanel. Can I "anchor" on the first item in the 2nd stackpanel copy?
To answer what APPEARS to be the primary question:
Is there a way to animation the position of a canvas using something
other than the Canvas.Left property
Set the RenderTransform property of the Canvas to a TranslateTransform and animate the TranslateTransform.X Property:
<Canvas x:Name="myCanvas" RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TranslateTransform X="0"/>
</Canvas.RenderTransform>
</Canvas>
Then in code:
EDIT: The second parameter of this method call should be of type DoubleAnimation, not Duration. I must have been sleeping at my desk when I typed this. Sorry.
(TranslateTransform)MyCanvas.RenderTransform.BeginAnimation(TranslateTransform.XProperty, new Duration(TimeSpan.FromSeconds(3)));
I hope this helps.
My other answer is becoming obsolete as you elaborate on your desired behavior, so forgive me for posting a second. Based on my latter comments on the above answer, consider the following example:
<Canvas x:Name="LayoutRoot">
<Grid x:Name="MarqueePanels">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Height="{Binding ElementName=PrimaryMarquee, Path=ActualHeight}" Width="{Binding ElementName=PrimaryMarquee, Path=ActualWidth}">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=PrimaryMarquee}"/>
</Rectangle.Fill>
</Rectangle>
<StackPanel Grid.Column="1" x:Name="PrimaryMarquee">
<TextBlock Text="Marquee Item 1"/>
<TextBlock Text="Marquee Item 2"/>
<TextBlock Text="Marquee Item 3"/>
</StackPanel>
<Rectangle Grid.Column="2" Height="{Binding ElementName=PrimaryMarquee, Path=ActualHeight}" Width="{Binding ElementName=PrimaryMarquee, Path=ActualWidth}">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=PrimaryMarquee}"/>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Canvas>
As I mentioned above, setting the Visibility of any of the TextBox elements to Hidden will not cause the StackPanel parent to resize, however using Visibility.Collapsed WILL force an Arrange pass of the parent panel. So if you truly NEED to use a StackPanel to contain the visual elements, then I recommend based on your comments above using Visibility.Hidden in lieu of Visibility.Collapsed.
Also notice the use of VisualBrush to replicate the Marquee content. This will simplify the code, and ensure that all 3 visuals always match (with the exception of whatever positioning or transformation you apply to the Rectangle objects that house the VisualBrush).
Additionally, I should say that I personally would use a Canvas in lieu of the StackPanel, as the Canvas is much better suited for absolute positioning of child elements, hence the reason for your question.
Craig, I truly hope this helps. I (like most people on here) will try to help however I can. Good luck!
Got it.
I set the margin to -(theControl.ActualWidth / 2). All my code shifts everything back by that same amount to compensate.
Then I have an event handler for SizeChanged on the control, where I set this value. If the size of the control changes, the margin is update, and everything focuses on the middle of the control. If you have a specific point within the control that you want to center animation on, then use that point instead of the halfway point described above.
I have the following piece of code, which is part of a WPF 4 UserControl:
<Popup x:Name="CantoPopup" IsOpen="False" PlacementRectangle="50,-100,500,120"
AllowsTransparency="True" PopupAnimation="Fade"
StaysOpen="True" Width="500" Height="120">
<Border BorderBrush="#FF120403" BorderThickness="1" CornerRadius="10" Background="#FF9350">
<s:SurfaceScrollViewer x:Name="IndexScroller" Width="500" Height="120" Margin="10" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible">
<DockPanel x:Name="InnerIndexPanel" />
</s:SurfaceScrollViewer>
</Border>
</Popup>
The DockPanel is then populated in the code-behind with a collection of TextBlocks. Basically, I am trying to build a scrollable horizontal list of touchable items.
Now, I would like to detect which textblock was touched by the user. However, neither adding a TouchDown event handler to the TextBlocks nor using TouchExtensions to handle tap gestures worked. Can someone please point me in the right direction?
Under the covers, Popup creates another hwnd to render its content into. This is different from all other WPF controls. You need to register this hwnd with the Surface SDK so it will start sending touch events to it. Use this to do that: http://msdn.microsoft.com/en-us/library/microsoft.surface.presentation.input.touchextensions.enablesurfaceinput.aspx
I found out that the point is that the Popup component has some peculiarities :) In this case, it seems that it did not detect neither TouchDown events nor PreviewTouchDown ones. Therefore, I resorted to creating a UserControl made of a Canvas containing the code above and then making such control visible on top of the rest whenever I needed the popup to open. I do not know whether this is the best solution, but now it reacts as expected.
I want a custom Control in WPF which have a appearance similar to HTML, we use for showing Images in the centre of the screen with the whole screen locked and only image is showing.
I dont want to show images, I want to show UserControls within this section.
Can someone give suggestions of this?
In your Window, put all your controls in a single Grid, with a Border control (that contains your image) as the last item in the Grid (which means it will display on top of the other items). Toggle its Visibility via binding or code. Adjust styles as required.
<Window>
<Grid>
<!-- window controls go here --->
<Border Visibility="..." Background="#80000000"> <!-- EDITED -->
<!-- overlaid image (and/or other controls) goes here --->
<Image
Source="..."
Width="..."
Height="..."
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<Grid>
</Window>
In Windows applications this is generally achieved using a modal dialog, i.e. you create a normal WPF window and show it using ShowDialog.