I would like create a button with text and image inside in, but this button should be transparent without loose behavior as cursors hand on mouse over and so on..
Also, it doesn't change its background color on mouse over. It's Always should appear transparent showing only my text and my image.
Is it possibile?
I think a very simple ControlTemplate will produce the desired output :
<ControlTemplate x:Key="TransparentButton" TargetType="Button">
<ContentPresenter Cursor={TemplateBinding Cursor}/>
</ControlTemplate>
Then simply apply if to the Templateproperty of your button.
Just add a {TemplateBinding Property} for the any properties you want to inherit. You should have a look at the default ControlTemplates on MSDN for your specific target (it may vary if targeting WP8, Silverlight or desktop)
Related
My question is pretty straight forward:
How do I achieve an Overlay Pop-Up effect using avalonia?
What I mean by this is I want to darken the whole Panel that contains my UI elements a little bit (tried the opacity attribute, but it didn't look good and the OpacityMask only seems to support "Transparent" as a color, but I want semi-transparency or even blur if that's possible). Then I want to display a little popup box. If this were CSS I'd be able to do a position: absolute;, however I couldn't figure out how to do this using avalonia.
To visualize what I mean here are some screenshots of a Windows Forms Application where I was able to achieve the desired effect:
My UI without overlay effect:
My UI with overlay effect:
As you can see the whole UI has been darkened a bit while the background is still visible (when using the avalonia Opacity property the effect is not the same and quite inconsistent, as the more panels are on top of each other on a given position the less the background seems to be affected by the Opacity and it just doesn't look good. I can add screenshots of how bad it would look later if you want.)
To sum it up:
1. How do I slightly and consistently darken (or even blur?) a panel with all of its contents, so that stacked panels with the same background color don't become visible, just because the transparency is acting weird?
2. What is the avalonia equivalent to the CSS position: absolute; so I can put my Pop-Up in the middle of the screen and on top of everything else?
You can use the same technique as in WPF:
<Window>
<Grid>
<DockPanel x:Name="YourMainContentGoesHere"/>
<Border IsVisible="{Binding IsPopupVisible}" Background="#40000000">
<YourPopupControlHere Width="200" Height="200"/>
</Border>
</Grid>
</Window>
Unconfigured Grid will display elements on top of each other, semi-transparent Border's background will darken the rest of the content.
I am very new to C# and WinForms. I am trying to create a segmented display where certain segments turn on and off (Using Microsoft Visual Studio 2015).
Right now I am placing picture boxes with segments I cropped and removed the background on in GIMP and it works fine so long as the segments are far enough away from each other, or are perfectly square.
When they overlap, with setting the picture box background transparent, the picture box is transparent straight through another picture box and just shows the background of the form window where the rectangular picture box is covering.
I tried two different things:
Changing default rectangular shape of picture box to any shape I can draw; not really sure how to do it and i don't think it is possible
Adding a bunch of picture boxes with a dark black picture and then rotating them and moving them to the correct position and turning them on when the particular segment comes on to cover up the problem. However, I don't think I can, or know how to just rotate an entire picture box when I am placing it? I have seen some code online on rotating picture boxes in C# but I am not sure how to implement it. I feel like with anything else there has to be a rotate option I am just missing.
Attached is a picture of the problem, notice how I sent the segment (line) to the back and the SMS quote image to the front. The dotted lines are the picture boxes:
You can use a WPF project to accomplish what you want. It is much more flexible than WinForms. Plus it supports true transparency. It does have a bit of a learning curve, but if you're just starting out, I think you would be better served to start with WPF.
You can rotate an Image (PictureBox) in WPF as follows:
<Window x:Class="WpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="467" Width="616">
<Grid>
<Image Source="C:\MyFolder\MyImage.gif">
<Image.LayoutTransform>
<RotateTransform Angle="45" />
</Image.LayoutTransform>
</Image>
</Grid>
</Window>
The winforms designer does not have features for real UX design. It's mainly targeted for designing simple UI for data oriented application. You will not find any advanced features. You can resize the controls, align them, moving between containers.
There are advanced ways, how to change the shape of controls. But it is not available in winforms designer.
The transparency in winforms is fake. Actualy the transparency means "I'll show the background color of my parent". If you want "true transparency" you must draw the other controls as the background image of target control.
I'm creating a WPF application which shows a list of styled messages. My goal is to have the contents of multiple styled messages selectable, similar to how you can in Skype:
Currently, I have a ListBox which contains an extension of ListBoxItem that is styled to my needs:
However, this method does not satisfy my goal of being able to select the text of multiple messages at the same time. It is only possible to select the text inside one message.
I also tried to put my custom elements inside a RichTextBox control within BlockUIContainers (which is what I suspect I will end up having to use), but the text inside each element cannot be selected, only the entire element:
Next, I attempted to extend the "Run" element, but I cannot figure out how to put a border around it to style an individual message.
<Run.Style>
<Style TargetType="{x:Type Run}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Run}">
<Border Background="{TemplateBinding Background}" x:Name="Bd" CornerRadius="2">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Run.Style>
With this XAML, I tried to surround the content of the Run using a template, a border element, and a content presenter. However, the Run control does not appear to support templates.
If anybody could point me in the right direction, that would be greatly appreciated.
I don't know if this will help you but is just another idea...
Use one text control with transparent background so you can select all the text at once. Then you have to draw rectangles behind the text blocks. Like an optical ilussion.
The challenge here is calculating the exactly size of the text rectangle box and the text allignment. My idea is having a predefined sizes and positions design (left text box, right text box, date, etc) so the size and positioning calculations are easier.
Another idea is play with the mouse and/or selection events. During the user text selection replace it programatically with your own selection. The user will think that is he who is selecting the text but is the application who is doing it. Another illusion...
I hope you could resolve it.
I'm working on a control template for an inherited TextBox class. I'd like to use this template to add additional controls with the ScrollViewer. I can achieve that goal just fine, what I can't do recreate the border in such away that it matches the Windows look and feel.
I have Windows Classic as my theme on XP. Textboxes are typically shown with the standard inset border style. With the XP Fischer Price theme, borders of textbox are a flat style and light blue.
Is there any way of specifying something like this in the template? Ideally it would use the theme default (grey inset for Classic, flat and light blue for fischer price theme).
You will have to provide a separate ControlTemplate for each known theme. There is no generic way to create a theme-agnostic ControlTemplate. Infact WPF itself maintains separate ControlTemplates for each official theme (excpet the Zune theme, where WPF falls back to battleship gray).
I'm not sure if this will work as I am not sure what your setup is. I also don't know if you are concerned about changing themes on the fly. You can try to set the style for your text box class to have
BasedOn="{DynamicResource {x:Type TextBox}}"
I'm working on a Microsoft Surface and attaching a round image object to a ScatterViewItem. I'm having an issue hiding the background of the square ScatterViewItem. If I go in and set the background to transparent, it's not transparent, it's more like gray translucent. So what I end up with is a round image in the middle sitting on a square with gray translucent edges. How do I hide this? I'm doing this programmatically through C#.
What you're seeing isn't really the svi background, but the shadow that is part of the default template. If you want to get rid of the shadow, you need to redefine the control template.
So like this:
<s:ScatterView>
<s:ScatterViewItem Background="Transparent">
<s:ScatterViewItem.Template>
<ControlTemplate>
<TextBlock>Hello World</TextBlock>
</ControlTemplate>
</s:ScatterViewItem.Template>
</s:ScatterViewItem>
</s:ScatterView>
Be aware that if you replace it like that, you lose all the other little visual flare like the 'pick up' effect and the shimmer. If you want to keep those, just use blend to edit a copy of the existing template and remove the shadow.