In the following code, the app bar is rendered without the AppBarButton Label text. Text shows only when hamburger button is clicked and bar is expanded. How can I make text show along with the icon initially?
CommandBar cb2 = new CommandBar();
AppBarButton b3 = new AppBarButton();
b3.Icon = new SymbolIcon(Symbol.Help);
b3.HorizontalAlignment = HorizontalAlignment.Left;
b3.Label = "HELP";
cb2.PrimaryCommands.Add(b3);
BottomAppBar = cb2;
Command Bar has a property IsOpen. Set that to True. Then CommandBar is always open.
Update
<CommandBar IsOpen="True" Name="xCommand" IsSticky="True" IsHitTestVisible="False">
<AppBarButton Icon="Add" Label="Add New Info"/>
</CommandBar>
This is my XAML. The command Bar Stays open at all times.
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'm just starting to learn C# and WP platform and i find it really hard to do some easy things, like changing a button icon, etc.
I've got a Command Bar and a AppBarButton created in XAML.
<Page.BottomAppBar>
<CommandBar MinHeight="60">
<AppBarButton x:Name="Command_BarButton" Icon="AllApps"
Label="Seletie"
Click="AppBar_Select"/>
</CommandBar>
</Page.BottomAppBar>
I would like to change the AppBarButton icon programatically in C# to another prexistent icon, like the Trash icon. How can i do this ?
Command_BarButton.Label = "Delete";
Command_BarButton.Icon = ?
I knew it would be very easy to change the AppBarButton Icon at runtime.
This is how:
Command_BarButton.Label = "Delete";
Command_BarButton.Icon = new SymbolIcon(Symbol.Delete);
Thanks to this link
to change Icon from code behind try this
ApplicationBar = new ApplicationBar();
ApplicationBarIconButton button1 = new ApplicationBarIconButton();
button1.IconUri = new Uri("/Images/play.png", UriKind.Relative);
button1.Text = "play";
ApplicationBar.Buttons.Add(button1);
source
this shuold help
<AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
<AppBarButton.Icon>
<BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>
</AppBarButton.Icon>
</AppBarButton>
source
This might be a trivial beginner question and I have found quite a bit of related information for Windows and Silverlight apps but nothing that would directly help me. I'm writing a Windows Phone 8.1/WinRT app in C# and XAML, and I would like to programmatically modify application bars created in XAML. For instance, there is a button I want to include in debug builds only, using preprocessor directives in code behind.
In the following XAML code I'm creating a BottomAppBar with two buttons. How can I create the second button (AppBarAddSampleItemsButton) including all properties in code behind?
<prism:VisualStateAwarePage.BottomAppBar>
<CommandBar >
<CommandBar.PrimaryCommands>
<AppBarButton x:Uid="AppBarNewItemButton"
Label="New item"
Icon="Add" Command="{Binding GoToAddItemPageCommand}" />
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<AppBarButton x:Uid="AppBarAddSampleItemsButton"
Label="Add sample items"
Command="{Binding GoToAddSampleItemssPageCommand}" />
</CommandBar.SecondaryCommands>
</CommandBar>
</prism:VisualStateAwarePage.BottomAppBar>
Here is a sample code creating an AppBarButton in the code behind and adding it to BottomAppBar of the current Page:
private void AddButtonToAppBar()
{
AppBarButton buttonToAdd = new AppBarButton { Label = "Label", Icon = new SymbolIcon(Symbol.Help) };
buttonToAdd.Click += async (sender, e) => await new MessageDialog("Button clicked").ShowAsync();
// add button to Page's BottoAppBar
(BottomAppBar as CommandBar).PrimaryCommands.Add(buttonToAdd);
}
Edit - as for Binding (again from the top of my head, so you will have to check this) this should probably work:
Binding myBind = new Binding();
myBind.Path = new PropertyPath("GoToAddSampleItemssPageCommand");
myBind.Source = DataContext;
buttonToAdd.SetBinding(AppBarButton.CommandProperty, myBind);
More about DataBinding at MSDN.
After some digging around on the Windows Phone dev center, I found this page: How to change app bar icon buttons and menu items dynamically for Windows Phone. Hope it helps!
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 :)
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