I'm using the Microsoft Ribbon for WPF October 2010 and have got 3 buttons next to each other, inside a RibbonControlGroup. The left and the right ones are text-only RibbonToggleButton controls, the one in the middle is an image-only RibbonButton. The buttons have a defined width to match the row above.
My code:
<r:RibbonControlGroup>
<r:RibbonToggleButton Width="110" Label="Outgoing" IsChecked="True" />
<!-- Padding and Height set to align the buttons/image -->
<r:RibbonButton Width="30" Padding="5 0" Height="24" SmallImageSource="Images\Small\arrow_swap.png" />
<r:RibbonToggleButton Width="110" Label="Incoming" />
</r:RibbonControlGroup>
The problem is that as soon as I apply the SmallImageSource to the middle button, the other two get spacings for images, causing the text not to be centered anymore. That is problem (1).
Because I didn't find a quick solution, I tried to add the image of the middle button not via SmallImageSource, but by adding it as <Image> for the content of the button. However, the button would remain empty. That is problem (2).
My third solution was to add images to the left and the right button, too. Unfortunately there is nearly no margin between the image and text, which looks quite ugly. I tried several things to enlarge the margin like adding a <Style TargetType="Image"> to the <RibbonToggleButton.Resources>, but although the editor accepts it and displays the spacing at designtime, the margin is gone again at runtime. That is problem (3).
Does anybody have an appropiate solution to any of the three problems? I cannot get it to work. The number of the problems is also the preference of the alternatives, (1) being the most favourite to use with an appropiate hack.
It seems you cannot do that. Its by design.
As per MSDN (here about half way down the page):
Related ribbon controls can be grouped together in a RibbonControlGroup. When a control group is resized, one RibbonControlSizeDefinition is applied to all of the controls in the RibbonControlGroup. The RibbonControlGroup is positioned in the RibbonGroup as if it were one control.
All the controls in a RibbonControlGroup shares the same RibbonControlSizeDefinition. Hence, in your case image will be added for all the buttons.
You may use RibbonGroup instead if you do not want to glue all your controls very closely. This way you can customize each button container by using different RibbonControlSizeDefinitions.
Related
I followed this article ...
https://alexdunn.org/2018/04/10/xamarin-tip-build-your-own-checkbox-in-xamarin-forms/
to add a checkbox control to Xamarin.forms. It works well, but I cannot figure out how to resize it.
Details:
I have a layout with a rowspan=2 cell spanning two regular cell heights. I get a tiny checkbox sitting in the center of the rowspan, with lots of unused space around it, and users find it is hard to hit when tapping. Therefore I want it double its size according to rowspan=2.
Any idea how I can accomplish this?
Edit1: Checkbox XAML
<ctrls:Checkbox
Grid.Row="0"
Grid.Column="2"
Grid.RowSpan="2"
OutlineColor="#AFCB08"
CheckColor="#AFCB08"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="50"
HeightRequest="50"
IsChecked="{Binding Done}"
CheckedCommand="{Binding CheckedCommand}" />
(Including Senthamizh suggestion to try WidthRequest and HeightRequest)
tried several Values for width and height: 10,50,100. Observations: in no case the checkbox would enlarge. When I used "10", the checkbox collapsed into a vertical line. Playing with DEFAULT_SIZE in CheckBoxRenderer.cs never had any notable effect.
In my Silverlight 4 application I need to create a user control with an irregular shape. The "main display" of the UC is a standard rectangle but I need to have tabs (simple text blocks, where the user can click) that are outside of the main display rectangle.
Is this possible with Silverlight 4? If so, how?
Thanks in advance.
You can position elements of a control outside its normal layout in a number of ways. You could use Canvas but if most of the control is standard Grid rectangle then you can use a Grid. The trick is to use negative Margins.
<Grid x:Name="LayoutRoot">
<Border Margin="0 -22 0 0">
<TextBlock Text="I appear above the UserControl layout" />
</Border>
</Grid>
Note that if the Usercontrol is being used as the Visual root then this won't work because the Silverlight plugin will not render beyound its client rectangle.
It is, you can have transparent background behind the tabs which can let clicks through, effectively behaving as if the shape was different. The UserControl will still have a rectangular shape including the tabs, unless you wrap then into a Popup and float out of the UC with some offset.
Technically, you can have elements outside the UserControl's rectangle if you use a Canvas for your LayoutRoot instead of a Grid. Elements in a Canvas aren't clipped to the canvas size. I wouldn't recommend this, however, because you won't be able to use Margin to size and align your controls inside it. It would be better to have all child controls inside a Grid LayoutRoot.
Which brings us to the question of irregularity. If you want to 'see through' parts of the control and be able to click through them (i.e. click objects underneath it), all you need to do is keep the UserControl's and the LayoutRoot's Background to null or just not set it at all. Wherever there is a lack of any background, clicks will go through. Note that if you set the background to Transparent it will make the control behave as a rectangle (as if it's filled with solid color) with respect to mouse input.
Another thing is if you want to see HTML controls under the see-through parts of your app. Then, you'll have to use windowless mode, but that's another can of worms.
I created a custom control similar to TabControl. It works nice, except that the text in header items gets blury when I resize the content. It can, for example look like this:
Not only the text, but the box around the text can also get non-vertical. See the blue border around the "General" item:
What is causing this problem? I have set SnapToDevicePixels = True.
Thanks for any ideas!
EDIT:
I'm using .NET 4.0. TextOptions.TextFormattingMode is set to "Display".
The whole problem with fuzzy text and background occurs if I apply a DropShadowEffect effect in the style for ItemsControl which displays the buttons. This is the code for the Effect:
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Direction="0" ShadowDepth="1" BlurRadius="10" Opacity="0.2" Color="Black" />
</Setter.Value>
</Setter>
If this code is not enabled, the the text and the borders get displayed nicely.
I suspect you've said it yourself: SnapToDevicePixels will ruin text rendering if you've resized the text so it displays across pixels. You probably want to keep SnapToDevicePixels="True" on your borders/backgrounds, but turn it off for the text elements.
As for your border... can you post the xaml? I'm guessing that you're not using just a single element with rounded corners - are you drawing the edge of that tab as three separate lines?
There are 2 things to consider:
are you using .NET 3.5 or .NET 4.0? reason why I'm asking is that the text rendering has been changed between the versions. In 4.0 it's a lot better.
Sometime you have to wait a little while until the text get's sharper, so you scroll around, and then after a second the text becomes sharper. That could be as well a reason for you're issue.
I would like to create a scrollbar in WPF that looks like the one seen in iTunes cover flow. See scrollbar image below, which also shows the reflection of the album art underneath the scrollbar.
Scrollbar Image http://www.barramsoft.com/pub/images/scrollbar2.jpg
Below is a basic scrollbar control in xaml.
<ScrollBar Name="scrollBar1" Height="24" Width="Auto" Orientation="Horizontal"
SmallChange="1" />
How can I get from the above to an iTunes cover flow scroll bar look? The full ready to use source code sample would be preferred.
Start with the ScrollBar ControlTemplate Example in MSDN from http://msdn.microsoft.com/en-us/library/ms742173.aspx (that is much easier to modify than the window style you can get from Blend or ShowMeTheTemplate)
Now start to edit the template, change the colors, the templates for the arrow buttons and the thumb until it looks like you want.
Have you got Expression Blend? If not I'd recommend installing it (there is a 30 day trial version if you don't have an MSDN license).
There are quite a few Expression Blend tutorials out there here's a good place to start for example.
Basically you copy the template for the standard scroll bar which will give you all the elements that go to make it up. You then change what each element looks like until you get it looking how you want it. There will be a fairly large amount of trial and error in this process.
The first task is to show the scrolled area underneath the scrollbar. You have to change the structure of the ScrollViewer control. By default it is a 2x2 Grid so the horizontal scrollbar is under the scrolled area. Edit its template to put the scrolled area and the scrollbar in the same cell, vertically aligning the scrollbar to bottom.
The second part is to style the scrollbar itself. I don't believe this can't be done with rounded rectangles.
I usually extract the template to modify it using Blend, there is also a free ShowMeTheTemplate tool.
Have a look at the WPF Themes project at codeplex. The Expression Blend Theme (light/dark) is very close to the example you've provided. It is released under Ms PL.
I have a long text and show first sentence in a TextBlock.
I wish by clicking the TextBlock or a button to show a panel below the TextBlock with full text. I wish this panel be absolutely positioned and be displayed above any other elements, you can do a similar thing in HTML showing and hiding absolutely positioned 'div' element.
How to do this in WPF?
Thank you for any suggestions.
AdornerLayer can work, but may be a little complex. Other options include using PopUps or ToolTips -- you should look into those first as your easiest options.
If these all don't work, it'll really depends on what kind of panel you're using. For example, if you're using a Canvas, all you have to do is make sure to set the correct ZIndex on the element.
In order to make this more robust, I'd suggest the following:
<!-- Set Panel.ZIndex="99" when showing hidden area to ensure top placement -->
<Grid>
<TextBlock>This is my primary bit of text ...</TextBlock>
<!-- Canvas stays hidden until we want to show the rest of the text -->
<Canvas Visibility="Hidden">
<TextBlock Canvas.Bottom="-10">Content goes here</TextBlock>
</Canvas>
</Grid>
Put the long text in an AdornerLayer is the best option. Check out some links
http://msdn.microsoft.com/en-us/library/ms743737.aspx
http://wangmo.wordpress.com/2008/10/19/relations-between-adorner-adornerlayer-and-adornerdecorator/