I'm creating buttons dynamically that have images as their background, The problem is the default WPF button animation on mouse over deform my button and hide the image.
Is there any way I can make my own button style for these buttons without creating a custom button class, and using something like myButtton.property = something;
in C# code not XAML because I'm creating the button dynamically.
YOu can do this by creating a template for button in resources...
Here is a sample...
XAML Code...
<UserControl.Resources>
<ControlTemplate x:Key="buttonTemplate">
<Image Name="btnImage" Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"></Image>
</ControlTemplate>
</UserControl.Resources>
<Grid Name="layoutRoot">
</Grid>
</UserControl>
in code behind:
Button button = new Button();
ControlTemplate ct = this.Resources["buttonTemplate"] as ControlTemplate;
Image img = ct.LoadContent() as Image;
img.Source = new BitmapImage(new Uri(#"C:\Users\Public\Pictures\Sample Pictures\Desert.jpg",UriKind.RelativeOrAbsolute));
button.Template = ct;
button.Height = 200;
button.Width = 200;
layoutRoot.Children.Add(button);
if you are adding buttons from view model you can get the button template from app resources (by putting the resource in app.xaml file)
You could set the ControlTemplate of the button. Since you do not wish to do this in the XAML here is one way you could do it in the code-behind:
string buttonTemplate =
"<ControlTemplate TargetType=\"Button\">" +
"<Image Source=\"myImage.gif\" />" +
"</ControlTemplate>";
myButton.Template = (ControlTemplate)XamlReader.Parse(template);
This is just for a basic button with an Image as the content. If you want to have custom animations on actions such as mouseover you can add XAML to the code-behind string using the VisualStateManager to take care of that.VisualStateManager
Related
I am making an app in WPF that displays an image which can be dragged and zoomed. Bottom, right and upper sides contain some UI elements like buttons and in the center I have a TabControl to which I add TabItems in the code of ViewModel. These TabItems consists of their content (an image) and a header where I have tab buttons. The problem I have is that an image I drag covers the header but not the buttons as you can see on the screenshot. The behavior I expect is to have this image hidden underneath the entire header, not only buttons. It only happens with the bottom side. When I drag the image to the top or right it gets hidden behind the sides like it's supposed to.
Header issue
I tried to change its background, opacity and ZIndex but nothing worked for me.
Here is my code.
XAML:
<TabControl Grid.Row="1" Grid.Column="0" TabStripPlacement="Bottom" Background="LightGray" ItemsSource="{Binding LayoutTabs}"
SelectedIndex="0" SelectedItem="{Binding SelectedTab, Mode=OneWayToSource}"/>
C#:
LayoutTabs = new BindableCollection<TabItem>();
for (int i = 0; i < _content.LayoutImages.Count; i++)
{
DrawingImage drawing = _content.LayoutImages.ElementAt(i);
Image image = new Image() { Source = drawing };
image.MouseMove += OnMouseMove;
var container = new LayoutContainer()
{
Background = Brushes.WhiteSmoke,
Child = image,
Focusable = true,
};
var tabItem = new TabItem()
{
Header = _content.GetLayoutName(i),
Content = container
};
LayoutTabs.Add(tabItem);
}
That behaviour is due to the headerpanels background being set to transparent in the default control template. If you right click the tabcontrol in the Designer window (not xaml editor) and click on Edit Template->Edit a Copy you get a copy of that tempalte and can then modify the headerpanel with your BackgroundColor and if need be increase the Zindex:
[....]
//this is the line to make your changes on:
<TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
[....]
I am working on a project where I want to add button in content property of TabControl in WPF.
I tried lot many ways but I failed.
This is the code Example :
XAML File
c# File
1. XAML File
<TabControl TabStripPlacement="Left" Name="DynamicTab">
<TabControl.ItemTemplate>
<DataTemplate>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
</DataTemplate>
</TabControl.ContentTemplate>
2. C# File
foreach(DataContextClass glist in groupsList)
{
TabItem tab = new TabItem();
StackPanel sp = new StackPanel();
tab.Header = glist.ItemGroup;
DynamicTab.Items.Add(tab);
itemsList = itemsDALObj.ItemsGroupWise(glist.ItemGroup);
for(int i =0 ; i<itemsList.Count;i++)
{
Button b = new Button();
b.Name = "Button" + (i + 1);
b.Content = itemsList[i].ItemName;
b.Height = 80;
b.Width = 100;
tab.Content = sp;
sp.Children.Add(b);
}
};
I tried following options:
By adding stackpanel, Grid, Button in <DataTemplate> of <TabControl.ContentTemplate>.
By adding Dynamic Grid and in that Grid I add Dynamic Button.
Many other ways also which I am not able to explain.
You have to replace in XAML instead of <TabControl.ContentTemplate> replace it with <TabControl.DataContext> and that's the solution it takes me hours to find this little mistake.
<TabControl.DataContext>
<DataTemplate>
</DataTemplate>
</TabControl.DataContext>
The above is the change in XAML part.
A TabControl is designed around the idea that the only controls that will be added to it are TabItem controls.
You can in fact, add other controls directly to the parent TabControl object, but when you do, it automatically creates an implicit TabItem anyway to hold those objects.
For instance, if you add two Button controls directly to the TabControl, two implicit TabItem controls are created, one to hold each Button:
<TabControl>
<Button/>
<Button/>
</TabControl>
This works, but is very much the wrong way to go about it.
To properly add content to a TabControl, first create a TabItem. Add your other controls to the TabItem, and then add the TabItem to the TabControl. (You can add the TabItem to the TabControl first if you want, it doesn't really matter)
In XAML:
<TabControl>
<TabItem Header="This is the label for the tab item.">
<Button Content="My Button"/>
</TabItem>
</TabControl>
In code (assuming a pre-existing TabControl):
TabItem ti = new TabItem();
ti.Header = "Tab Header Text";
Button bt = new Button();
bt.Content = "Button Text";
ti.Content = bt;
myTabControl.Items.Add(ti);
A TabControl, like all WPF controls is a container. It can hold multiple objects, but all of those objects are actually TabItem objects. The TabItem control can only hold one object, so if you want it to contain more than just the Button, you have to add a different container to the TabItem first; like a Grid or StackPanel.
Is it possible to add a textfield programmatically in WP8?
I know in Java I can use something like this:
canvas.drawText(Days, TypedValue + width, labelsY, paint);
It uses the:
private Paint paint = new Paint();
Is something like this possible in WP8?
I have to use this because it the number of textboxes needed varies in the application.
I know I can use some textboxes, and just set the .visible state. But I would like to learn to do this programmatically.
Thanks
Of course, everything which you do in XAML can be done programmatically. Say you have the following:
<Grid x:Name="myGrid">
<TextBox Text="Initial text" />
</Grid>
In the code-behind xaml.cs for that same XAML file, you can do the same by adding to the Grid's Children collection (a field is created for the named element):
TextBox t = new TextBox();
t.Text = "Initial text"
myGrid.Children.Add(t);
or more succinctly
myGrid.Children.Add(new TextBox { Text = "Initial text" } );
I'm trying to set an icon to be attached to a textblock when it is saved but I'm not sure how I would do this programatically.What I'm thinking is you could set the value to the left of the textbox to an image.I have tried this but I'm not sure how I would set it to an image icon:
NoteGridView.SetValue(Canvas.LeftProperty(double)block.GetValue(Canvas.LeftProperty));
This is how I'm adding the notes to the layout:
// Creates a new textblock that for this note.
TextBlock block = new TextBlock();
//block.SetValue
notepadTxtBox.SetValue(Canvas.LeftProperty, (double)block.GetValue(Canvas.LeftProperty));
block.Width = 250;
block.Height = 125;
block.Text = notepadTxtBox.Text;
// Add that note to the grid.
NoteGridView.Items.Add(block);
Does anyone have any idea how I would acheive this or is it possible to do in the xaml code?
This might give a better understanding of what I'm trying to do:
You could put a StackPanel inside of the TextBlock, containing an Image, and another TextBlock, like so:
<TextBlock>
<StackPanel Orientation="Horizontal">
<Image Name="YourImage" Source="image/Under-Construction.png" />
<TextBlock Text="Your Text Block Text" />
</StackPanel>
</TextBlock>
You would then be able to set the Image programmatically like so:
YourImage.Source = "path.to.image.file"
I have a Page like in the Xaml below which i want to use like a ModalDialog.
The Problem is that when I Pop the Dialog up, that the Opacity of the second Grid which holds the Content is not changed back to 100% and I see from the Page where it is Popuped the underlying controls. For more Detail see the Screenshot.
Is there a way that I can change back the Opacity of the second Grid to 100% that no control behind it can see through?
For completneness I have added the Code which i'm using to bring up the Popup.
ModalDialog Xaml:
<Page>
<Grid x:Name="RootPanel" Background="{StaticResource LucentBlue}" Opacity=".75">
<Border >
<Grid VerticalAlignment="Center"
Height="300" Background="{StaticResource PremiumBlue}" Opacity="1">
</Grid>
</Border>
</Grid>
</Page>
Code Behind Hosted Page:
private Popup _saveDialog;
private void SaveSettingsCommandLogic(object obj)
{
ModalDialog dlg = new ModalDialog();
dlg.CloseRequested += DlgOnCloseRequested;
_saveDialog = new Popup();
_saveDialog.Child = dlg;
_saveDialog.IsOpen = true;
}
Here's a solution in metro :
Please remove the Opacity property of both the elements and from the code behind of the ModalDialog class use the following code:
public ModalDialog()
{
this.InitializeComponent();
Color color = Color.FromArgb(150,255,0,0);
RootPanel.Background = new SolidColorBrush(color);
}
The method FromArgb is used to specify the transparency red green and blue values respectively and can rancge from 0-255 .. please test according to ur convinience :)