I'm writing a program that starts out with requiring a certain amount of lines of text and for that I use a TextBox. To make the program look nice, I put a background image on the form. Now I don't want the TextBox to put a large white block on the image, so for that I made the TextBox have a transparent background. But here's the problem: as soon as I start putting text in the TextBox, the lines that have text will revert back to the white background that I don't want. So how can I stop my program from doing that?
I can't post images yet, so I'll just use links:
This image shows the background as I have it and how I want it to be:
This image shows what happens when I start typing:
I want the background to just remain the same while I type (of course the text colour should then be lighter, but the textbox.forecolor seems to have no effect.
So below is the code I have so far, I hope you can help me, I'm still quite new to this :)
public class NieuwSpel : Form
{
Label spelerslijst, nummer;
TextBox spelersInput, spelnr;
Button OK;
public NieuwSpel()
{
this.BackgroundImage = WeerwolvenvanWakkerdam.Properties.Resources.Background_NieuwSpel;
this.FormBorderStyle = FormBorderStyle.Fixed3D;
spelerslijst = new Label();
spelerslijst.Location = new Point(10, 10);
spelerslijst.Text = "Voer hier de spelerslijst in:";
spelerslijst.Width = 200;
spelerslijst.BackColor = Color.Transparent;
spelerslijst.ForeColor = Color.White;
this.Controls.Add(spelerslijst);
spelersInput = new CustomTextBox();
spelersInput.Location = new Point(10, 40);
spelersInput.Size = new Size(200, 300);
spelersInput.Multiline = true;
spelersInput.BackColor = Color.FromArgb(100, 100, 100, 100);
spelersInput.ForeColor = Color.White;
spelersInput.GotFocus += this.setColour;
this.Controls.Add(spelersInput);
OK = new Button();
OK.Text = "Start Spel!";
OK.Location = new Point(110, 430);
OK.Click += this.Start;
this.Controls.Add(OK);
nummer = new Label();
nummer.Text = "Spelnummer:";
nummer.Width = 75;
nummer.Location = new Point(10, 360);
nummer.BackColor = Color.Transparent;
nummer.ForeColor = Color.White;
this.Controls.Add(nummer);
spelnr = new CustomTextBox();
spelnr.Width = 50;
spelnr.Height = 20;
spelnr.Location = new Point(90, 360);
spelnr.BackColor = Color.FromArgb(100, 100, 100, 100);
spelnr.ForeColor = Color.White;
this.Controls.Add(spelnr);
}
public void setColour(object o, EventArgs ea)
{
((CustomTextBox)o).BackColor = Color.FromArgb(100, 100, 100, 100);
}
}
public partial class CustomTextBox : TextBox
{
public CustomTextBox()
{
SetStyle(ControlStyles.SupportsTransparentBackColor |
ControlStyles.OptimizedDoubleBuffer |
ControlStyles.AllPaintingInWmPaint |
ControlStyles.ResizeRedraw |
ControlStyles.UserPaint, true);
}
}
This probably won't be easy in WinForms. If you're just messing around on your own and trying to learn, you might want to consider playing around with WPF. A lot of people still have to deal with WinForms, but I've developed in both and WPF definitely supersedes it.
It can provide the desired effect out-of-the-box:
<Window x:Class="SampleWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:l="clr-namespace:SampleWpf"
Title="MainWindow" Height="250" Width="400" >
<Window.Background>
<ImageBrush ImageSource="images.jpg" />
</Window.Background>
<Grid>
<TextBox Margin="5" Background="Transparent" Text="HELLO THERE!"
FontSize="20" FontWeight="Bold" Foreground="White" />
</Grid>
</Window>
Related
I am trying to rotate an image on an EventHandler, for an Event that i created. The Event Handler works perfectly fine. Yet the image does not rotate and I do not know what I am missing.
This UserControl is not displayed like this, but in a Grid of another UserControl.
<UserControl x:Class="Mabri.Module.P83.View.SchematicSystemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Mabri.Module.P83.View"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Image x:Name="drehteller" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</UserControl>
This is the code behind the XAML, at first I tried having this in a separat class, if this is possible it would be even better, but at the moment I am just trying to get this running.
{
private System.Windows.Controls.Image drehteller_image;
private int currentAngle = 0;
public SchematicSystemView()
{
EventAggregator.SubscribeEvent(this);
InitializeComponent();
drehteller_image = new System.Windows.Controls.Image()
{
Stretch = Stretch.Uniform,
Source = new BitmapImage(new Uri("pack://application:,,,/Mabri.Module.P83;Component/Images/drehteller_unbestueckt.png")),
RenderTransform = new RotateTransform()
};
drehteller.Source = drehteller_image.Source;
}
public void OnEventHandler(DrehtellerMoved e)
{
EventAggregator.PublishEvent(new LogInfo
{
Title = "Should rotate",
Summary = "The drehteller should rotate now",
Detail = "The drehteller should rotate " + currentAngle + " is the current angle",
LogLevel = LogLevel.Information
});
int steps = e.steps;
double timeforonestep = e.speed / e.steps;
int angle = steps * 72;
int angle_to_reach = currentAngle + angle;
Storyboard storyboard = new Storyboard();
storyboard.Duration = new Duration(TimeSpan.FromSeconds(timeforonestep * steps));
DoubleAnimation rotateAnimation = new DoubleAnimation()
{
From = currentAngle,
To = currentAngle + angle,
Duration = storyboard.Duration
};
Storyboard.SetTarget(rotateAnimation, drehteller);
Storyboard.SetTargetProperty(rotateAnimation, new PropertyPath("(UIElement.RenderTransform).(RotateTransform.Angle)"));
storyboard.Children.Add(rotateAnimation);
storyboard.Begin();
currentAngle = angle_to_reach;
}
}
In the testing case e.steps equals 1 and e.speed equals 10.0.
I expected the image to turn for 72 degrees, but for some reasons nothing happens, except for the LogMessage at the beginning of the handler.
First, assign a RotateTransform to the RenderTransform property of the Image. Otherwise it can't be animated.
<Image x:Name="drehteller" HorizontalAlignment="Center" VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform/>
</Image.RenderTransform>
</Image>
Then instead of setting From and To just set By. And drop the Storyboard and start the animation directly on the control's RenderTransform
var animation = new DoubleAnimation
{
By = angle,
Duration = TimeSpan.FromSeconds(...)
};
drehteller.RenderTransform.BeginAnimation(RotateTransform.AngleProperty, animation);
Finally, do not create the intermediate Image element. That is redundant.
drehteller.Source = new BitmapImage(new Uri("..."));
I need to display a full screen dialog (in application window boundaries) in my UWP application, but can't seems to make it work. I tried with :
ContentDialog only shows vertically stretched with FullSizeDesired="True"
Popup, even trying to set the width and height in code behind its not working
Flyout Placement="Full" only stretch it vertically just like the contentdialog
Can't believe I spend so much time on that thing :(
Thanks
Have you tried something like this:
var c = Window.Current.Bounds;
var g = new Grid
{
Width = c.Width,
Height = c.Height,
Background = new SolidColorBrush(Color.FromArgb(0x20, 0, 0, 0)),
Children =
{
new Rectangle
{
Width = 100,
Height = 100,
Fill = new SolidColorBrush(Colors.White),
Stroke = new SolidColorBrush(Colors.Black),
StrokeThickness = 3
}
}
};
var p = new Popup
{
HorizontalOffset = 0,
VerticalOffset = 0,
Width = c.Width,
Height = c.Height,
Child = g
};
p.IsOpen = true; // open when ready
You should see a semi-transparent overlay with a white rectangle in the middle of your screen.
To make a popup Fullscreen I did the following. Hope this helps.
I have a user control I wanted to show as a popup. Its name "URLUserControl"
Step 1: UI of the UC (Just the first bit. Not complete code)
<UserControl>
<Grid>
<Popup x:Name="MPopup" VerticalAlignment="Center">
<Grid x:Name="MainGrid">
Step 2: UC constructor adds the following
private void InitURLUserControl()
{
MPopup.IsOpen = true;
Window.Current.SizeChanged += Current_SizeChanged;
MainGrid.Width = Window.Current.Bounds.Width;
MainGrid.Height = Window.Current.Bounds.Height;
}
Step 3:
private void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e)
{
MainGrid.Width = Window.Current.Bounds.Width;
MainGrid.Height = Window.Current.Bounds.Height;
}
The above code will help the popup to be the center of the screen and display in fullscreen in size. Check it out. Happy coding!
I have created one TextBox, PasswordBox and Button for ClickEvent dynamically. When user press student or teacher Button. Now Problem is that TextBox is not getting value when I click on it. Mean as I click on textfield curser should bling on it and get value I wrote in it. but it is not getting it. PasswordBox is working fine.
Sorry for bad English.
here is my code
TextBlock name_block = new TextBlock();
name_block.Text = "Enter your ID : ";
name_block.Margin = new Thickness(5, 8, 0, 0);
container.Children.Add(name_block);
TextBox name_box = new TextBox();
name_box.Width = 200;
name_box.Height = 25;
name_box.IsEnabled = true;
name_box.Margin = new Thickness(150, 5, 1, 1);
container.Children.Add(name_box);
TextBlock pass_block = new TextBlock();
pass_block.Text = "Enter your password : ";
pass_block.Margin = new Thickness(5, 78, 0, 0);
container.Children.Add(pass_block);
PasswordBox pass_box = new PasswordBox();
pass_box.Width = 200;
pass_box.Height = 25;
pass_box.IsEnabled = true;
pass_box.Margin = new Thickness(150, 75, 0, 0);
container.Children.Add(pass_box);
Button login_btn = new Button();
login_btn.Content = "Login";
login_btn.Height = 25;
login_btn.Margin = new Thickness(150, 150, 0, 0);
container.Children.Add(login_btn);
teacher_btn.IsEnabled = false;
login_btn.Click += Teacher_Login_btn_Click;
}
I think you are using Grid with out setting grid columns and rows. Seeing your code you can use canvas layout container as you are setting location for your controls.
<Canvas Name="container" HorizontalAlignment="Left" Height="301" Margin="10,10,0,0" VerticalAlignment="Top" Width="499" />
Rest of your code works if you are using canvas container.
otherwise let me know which layout container you are using.
I am drawing Circle on an WPF window. The problem is that I am unable add Text to the Circle. The code is given below:
public Graphics()
{
InitializeComponent();
StackPanel myStackPanel = new StackPanel();
Ellipse myel = new Ellipse();
SolidColorBrush mscb = new SolidColorBrush();
mscb.Color = Color.FromArgb(255, 255, 0, 0);
myel.Fill = mscb;
myel.StrokeThickness = 2;
myel.Stroke = Brushes.Black;
myel.Width = 100;
myel.Height = 100;
//string str = "hello";
myStackPanel.Children.Add(myel);
this.Content = myStackPanel;
}
Please help me in this regard.
Shapes are simply shapes, if you want to add text then add both the shape and a TextBlock with your text to a common container which lays them on top of each other, e.g. a Grid without rows or columns.
In XAML:
<Grid>
<Ellipse Width="100" .../>
<TextBlock Text="Lorem Ipsum"/>
</Grid>
C#
var grid = new Grid();
grid.Children.Add(new Ellipse { Width = 100, ... });
grid.Children.Add(new TextBlock { Text = "Lorem Ipsum" });
Or you can use direct positioning in a Canvas if you prefer direct control over the draw position:
My sample defines a UI control that draws rectangles with text in it:
XAML:
<UserControl x:Class="DrawOnCanvas"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MySample"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Canvas x:Name="DrawCanvas" Height="30"/>
</Grid>
Code behind:
// You might e.g. call this in the constructor of DrawOnCanvas
internal void DrawRectWithText()
{
var rect = new System.Windows.Shapes.Rectangle();
rect.Stroke = new SolidColorBrush(Colors.Black);
rect.Fill = new SolidColorBrush(Colors.Beige);
rect.Width = 100;
rect.Height = 100;
// Use Canvas's static methods to position the rectangle
Canvas.SetLeft(rect, 100);
Canvas.SetTop(rect, 100);
var text = new TextBlock()
{
Text = task.Title,
};
// Use Canvas's static methods to position the text
Canvas.SetLeft(text, 90);
Canvas.SetTop(text, 90);
// Draw the rectange and the text to my Canvas control.
// DrawCanvas is the name of my Canvas control in the XAML code
DrawCanvas.Children.Add(rect);
DrawCanvas.Children.Add(text);
}
I am wondering on the best way of dealing with a problem I have.
I am in the early stages developing a WPF application that has several images that are all
individual classes. I am attempting to use the MVVM model but I wish to implement a Mouse over event such that when I scroll over a image I wish to bring up some information or do some effects over the image I am not quite sure how to go around this but I have an example of the class below.
public class TeamKit
{
private Image mainImage;
public Canvas Position { get; set; }
public TextBlock PlayerText { get; set; }
public TextBlock NameText{ get; set; }
public Player Player { get; set; }
private string _playerName = "Player0";
private string _playerNumber = "0";
private BitmapImage _bImage;
public TeamKit(Thickness t)
{
mainImage = new Image();
_bImage = new BitmapImage(new Uri("pack://Application:,,,/Resources/KitC.png"));
mainImage.Source = _bImage;
mainImage.Stretch = System.Windows.Media.Stretch.None;
Position = new Canvas();
Position.Width = 38;
Position.Height = 45;
Position.Margin = t;
mainImage.Margin = new Thickness(0, 0, 0, 6);
PlayerText = new TextBlock();
PlayerText.Text = ""; PlayerText.TextAlignment = TextAlignment.Center;
PlayerText.Margin = new Thickness(11, 15, 27, 15);
Position.Children.Add(mainImage);
Position.Children.Add(PlayerText);
}
public TeamKit()
{
mainImage = new Image();
_bImage = new BitmapImage(new Uri("pack://Application:,,,/Resources/KitC.png"));
mainImage.Source = _bImage;
mainImage.Stretch = System.Windows.Media.Stretch.None;
Position = new Canvas();
Position.Width = 38;
Position.Height = 45;
//mainImage.Margin = new Thickness(0, 0, 0, 6);
PlayerText = new TextBlock();
PlayerText.Text = _playerNumber; PlayerText.TextAlignment = TextAlignment.Center;
PlayerText.Margin = new Thickness(12, 15, 27, 15);
PlayerText.Width = 15;
Viewbox Vb = new Viewbox();
//Vb.StretchDirection = StretchDirection.Both;
Vb.Stretch = System.Windows.Media.Stretch.Uniform;
Vb.VerticalAlignment = VerticalAlignment.Stretch;
Canvas.SetTop(Vb, 40);
Canvas.SetLeft(Vb, -11);
Vb.MaxWidth = 50;
NameText = new TextBlock();
NameText.Text = _playerName;
NameText.TextAlignment = TextAlignment.Center;
NameText.MaxHeight = 40;
NameText.MaxWidth = 90;
Vb.Child = NameText;
Position.Children.Add(Vb);
//<TextBlock Text="FooAlanghi" TextWrapping="Wrap" TextAlignment="Center" MaxHeight="40" MaxWidth="92" />
Position.Children.Add(mainImage);
Position.Children.Add(PlayerText);
}
public TeamKit(Player Player, int PlayerNumber)
{
this.Player = Player;
_playerNumber = PlayerNumber.ToString();
_playerName = Player.Last_Name;
mainImage = new Image();
_bImage = new BitmapImage(new Uri("pack://Application:,,,/Resources/KitC.png"));
mainImage.Source = _bImage;
mainImage.Stretch = System.Windows.Media.Stretch.None;
Position = new Canvas();
Position.Width = 38;
Position.Height = 45;
//mainImage.Margin = new Thickness(0, 0, 0, 6);
PlayerText = new TextBlock();
PlayerText.Text = _playerNumber; PlayerText.TextAlignment = TextAlignment.Center;
PlayerText.Margin = new Thickness(12, 15, 27, 15);
PlayerText.Width = 15;
Viewbox Vb = new Viewbox();
//Vb.StretchDirection = StretchDirection.Both;
Vb.Stretch = System.Windows.Media.Stretch.Uniform;
Vb.VerticalAlignment = VerticalAlignment.Stretch;
Canvas.SetTop(Vb, 40);
Canvas.SetLeft(Vb, -11);
Vb.MaxWidth = 50;
NameText = new TextBlock();
NameText.Text = _playerName;
NameText.TextAlignment = TextAlignment.Center;
NameText.MaxHeight = 40;
NameText.MaxWidth = 90;
Vb.Child = NameText;
Position.Children.Add(Vb);
//<TextBlock Text="FooAlanghi" TextWrapping="Wrap" TextAlignment="Center" MaxHeight="40" MaxWidth="92" />
Position.Children.Add(mainImage);
Position.Children.Add(PlayerText);
}
public void Add(Panel Parent)
{
Parent.Children.Add(this.Position);
}
public static void DrawPositionLineUp(List<TeamKit> Players, Panel panel, double top, double left)
{
double ix = 0;
foreach (TeamKit t in Players)
{
Canvas.SetLeft(t.Position, left);
Canvas.SetTop(t.Position, ix += top);
t.Add(panel);
}
}
}
It's nice that you're using the MVVM route, but be aware that what you are wanting to do has nothing to do with MVVM. You're question is all view-related (well, mostly).
You're control needs a ToolTip:
<Image ...>
<Image.ToolTip>
<ToolTip ...>
Content (which can be another layout of controls)
</ToolTip>
</Image.ToolTip>
</Image>
As for effects, depending on what effects, a lot of them are already built in (blur, shadow, etc). But, either way you want to use Triggers within the style.
<Image ...>
<Image.Style>
<Style>
<Trigger Property="Image.IsMouseOver" Value="True">
<Setter ... /> <!-- Apply Styles Here -->
</Trigger>
</Style>
</Image.Style>
</Image>
NOTE: It's probably best to pull out the style into a static resource and apply it to all controls of that kind within that Window/User Control/Page or higher up in the chain (Application) so that you can do...
<Image Style="{StaticResource MouseOverImage}" ... />
As for why I said "you're question is all view-related (well, mostly)" ... what I mean is that it is view-related up until the point of databinding, then you must coordinate with your view-model to make sure it exposes properties that you need. Outside of that, it is a 100% view-related question and you do not have to worry about any MVVMness in this situation. Continue using MVVM, but realize that this is how you'd do it whether or not you were using MVVM.
Have you considered using triggers?
When handling mouseover events I usually go with triggers, but you should also consider MVVM light - (or something similar) its a great tool for MVVM enthusiasts.