How to use FluentDesignForm with RibbonControl? - winforms

I want to use FluentDesignForm with RibbonControl from DevExpress to realize effect illustrated in Image1, but what I actually get is Image2. The problem is that the min/max/close buttons at right top corner of FluentDesignForm are missing and I cannot move the form by dragging its title bar. Is it possible to realize the effect I want?
Here is Image1:
and Image2:

DevExpress did not use the FluentDesignForm for this. Their form is a RibbonForm. The inheritance tree looks like this:
DevExpress.XtraGrid.Demos.frmMain
> DevExpress.DXperience.Demos.RibbonMainForm
> DevExpress.XtraBars.Ribbon.RibbonForm
> DevExpress.XtraEditors.XtraForm
> DevExpress.XtraEditors.MouseWheelContainerForm
> DevExpress.XtraEditors.DForm
> System.Windows.Forms.Form
The RibbonForm has no control box and is supposed to be used with a RibbonControl handling this.
On the left side, they use a custom control derived from the AccordionControl:
DevExpress.DXperience.Demos.NavigationControl
> DevExpress.XtraBars.Navigation.AccordionControl
> DevExpress.XtraEditors.BaseStyleControl
> DevExpress.XtraEditors.BaseControl
> DevExpress.Utils.Controls.ControlBase
> System.Windows.Forms.Control
Their trick is to put their NavigationControl (aka AccordionControl) directly onto the RibbonForm and override the accordion's method GetUseDirectCompositionStyle() to return true (without checking for DirectX and stuff).

Related

ImageViewer in WPF

Hi everyone I would like to implement an ImageViewer (like the one in Facebook for example) in a WPF application
I already have a ListBox whith my pictures, it works well. But I would like to add pop "image full size" when the user double click on one of them. (something like in FB, with a fade out of the background etc).
Currently I'm thinking of to use a Window...Do you have a better idea of what I should use ?
i would probably use a window for that as well. Then you can easily put an opacity animation when the window loads to give it the fade in and fade out effect
You could also use a Popup control.
It comes with some some built in (but very limited) animations, like fade, see PopupAnimation.
I'd try that and if it doesn't fit your needs, I second bflosabre91 oppionion and would use a separate opacity animated window.
But bear in mind that with an additional window you could have negative side effects e.g always sync the window positions correctly, handle task switches (ie. correctly hide the window in the taskbar/tasklist)

How can I center a tooltip above my control in Silverlight?

I want to be able to display a tooltip centered above my control.
I know how to customize the XAML used to display the tooltip using the TooltipService, however, the placement options the TooltipService makes available only allow you to specify top, bottom, left, right, etc. They don't let you specify an alignment once on the given side.
By simply using the TooltipService, selecting a placement of "Top" puts the tooltip above the control and has it aligned to the left side of the control. If there is not enough room for it to be aligned left, it moves it to be aligned on the right side of the control.
I want the tooltip to be centered on the top of the control. I don't want it to anchor to either the left or the right while on top.
Is this possible? How?
you should check out the TooltipService. MSDN documentation is here. and here is a (WPF) sample from CodeProject.
A quick shot: you could create your own TooltipService class to extend the possibilities of the existing one to manipulate a Tooltip instance.
Here you can find a nice class to help position a popup by specifying a list of preferred positions, like the TooltipService does for tooltip. You can specify a Top placement with Center HorizontalAlignment. I know this isn't a tooltip but I thought you could check it out and use it to create a BetterTooltipService.

Silverlight 4: how to highlight control on mouse over

My aim is to get fine control "animation" when it is mouse-over-ed. For example, I have a "map" of controls (game map that represent different type of terrain), each of them is an image with trees/rocks/hills on the green grass or water (lake or see) image of blue/cyan color. When user point any image with mouse it should get shiny: either get more bright background or get a shiny border.
It is hard to say what exactly I want to have (either background change or border), I would like to try each of them and see what is the most appropriate for me.
I am going to have a custom control (MapTile) that will represent a map tile. I know how to catch MouseEnter/MouseLeave events, but not sure how to change control style and if it is a good idea to work with control style in CodeBehind, probably there are better XAML-based solutions.
Could you please help with a solution that provide few goals:
Goal1: Add highlighted border around the control (it will be squares/rectangles, or circles; use what is easier) on mouse enter, remove border on move leave;
Goal2: Change some properties of my CustomControl (for example, background color).
Thank you very much!
1. How to han
You might find it easiest to get hold of Expression Blend and use it to create a custom template for your control.
The Learn Expression Blend page would be a good place to start. Look for tutorials on customising buttons and this is the same sort of thing that you want to do.
You need to use an attached behavior on your control. You don't need to learn Blend for this.
Check this one as an example, but you can search the site for Mouse Over for other examples.
http://gallery.expression.microsoft.com/en-us/MouseOver3D

WPF - Expand Window to the Left

I have a WPF window with expandable panel (via Expander). The panel is on the left side of the window, and when expanded the window grows to fit the content.
By default, windows are anchored to the top-left, so my window grows to the right. I'd like the window to grow to the left.
I tried to do the following in the Window.SizeChanged event:
private void onWindowSizeChanged(object sender, SizeChangedEventArgs e)
{
Left -= (e.NewSize.Width - e.PreviousSize.Width)
}
and it works, but the growth is jerky, and I'd like to find a smoother solution.
I managed to overcome this using a simple solution: Hide & Show.
Here's the code:
protected override void OnRenderSizeChanged(SizeChangeInfo sizeInfo)
{
if (!sizeInfo.WidthChanged)
{
base.OnRenderSizeChanged(sizeInfo);
return;
}
Hide();
base.OnRenderSizeChanged(sizeInfo);
Left -= (sizeInfo.NewSize.Width - sizeInfo.PreviousSize.Width);
Show();
}
I replaced the event handler for Window.SizeChanged with this override of FrameworkElement.OnRenderSizeChanged.
I haven't tried to make a Window grow to the left like what you're requesting, but if all else fails, I would consider templating a button to look like the expander button. Then instead of trying to make your Window grow to the left, make a new Window grow to the left of your primary Window using Transforms.
UPDATE
Well, the poor rendering performance could be video card related, layout (overly complex) related, or both. I've got an idea that might do the trick for you. Jeff Prosise blogged about a magnifying glass in Silverlight that uses a WriteableBitmap to achieve the desired effect. I thought, "why not use a WriteableBitmap to create a screenshot of your layout to the right of the Expander, and cover up the other elements with it?". I think that if you do this and hide the underlying elements (so they don't get adjusted), rendering performance will be much improved.
I got Jeff's code to work in WPF with little modification.
http://www.wintellect.com/CS/blogs/jprosise/archive/2009/10/29/more-fun-with-silverlight-3-s-writeablebitmap.aspx
Solution 1
Try to use Window property: SizeToContent="width" this will scale your window to the size of your content and you can scale your content using animation and easing, this will make scaling of the window nice and smooth.
Solution 2
You could create a window which is bigger than it's content and make your background transparent. You still have to add background to some element.
Here is an example of how it may look like:
You may put your expander in a grid (where the column size can change) and then set the ExpandDirection property of your expander to left ?

IPhone like scrolling on Silverlight ListBox

I need a listbox with IPhone-like functionality for Silverlight. That is, animated scrolling, and click and drag to scroll. Scrolling will continue a bit after the mouse up event based on the "speed" of the dragging. I've search and found no control vendors providing this. So question is how should I build it? I need some hints to get started.
There's two parts to this question:
Part 1, How to get the animated scrolling of the listbox.
Part 2, How to build a "draggable" scrolling, I guess I should put a canvas on top and track the mouseevent, and simulate some physics. Some hints here would have been great.
Thanks Larsi.
A while ago I made a control that did something like this. All I did was put a stackpanel inside a canvas. Just adjust the canvas.top of the entire stackpanel on a mousemove (while mouse is pressed). To animate the scrolling after a mouseup, you really just need to track the amount moved and apply an animation to the canvas.top property.
Here's a really nice complete sample for WPF that does both drag scrolling and automatic flick/inertia scrolling. I'm not sure what if anything would need to be changed to make it work in Silverlight.
http://sachabarbs.wordpress.com/2009/12/24/friction-scrolling-now-an-wpf-attached-behaviour-too/
Just a note that as-is you can't click and drag the view if you click on a child (e.g. buttons) that capture the mouse input. I actually ended up modifying this sample so you could still drag scroll when you click on children, while still allowing children to accept mouse input when not drag scrolling.
This will be easier in Silverlight 3 than Silverlight 2, but not impossible in 2.
This video from MIX 09, Building Microsoft Silverlight Controls, should help you.
Another post from Sacha Barber's website:
http://sachabarber.net/?p=481
Jeremiah Morrill shares code that implements animated scrolling with inertia in a custom ContentControl (templated with an included ScrollViewer)
<ScrollViewer x:Name="sv1" Width="500" Height="285">
<StackPanel x:Name="sp1" Width="450" Height="285">
</StackPanel>
</ScrollViewer>
By setting pos. and neg. margins to the stackpanel inside the scrollviewer
you can create a scroll effect.
onScroll_Up()
{
//Change this based on your scrollviewer dimension
if (this.sv1.ScrollableHeight < 300)
{
Thickness thickness = this.sp1.Margin;
thickness.Top += 50;
this.sv1.SetValue(StackPanel.MarginProperty, thickness);
}
}
onScroll_Down()
{
if (this.sv1.ScrollableHeight > 1)
{
Thickness thickness = this.sp1.Margin;
thickness.Top += -50;
this.sv1.SetValue(StackPanel.MarginProperty, thickness);
}
}

Resources