apologize if i am wrong, i am developing metro apps using windows8 preview release using C#.
As we all know we can create bottom app bars.
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781232.aspx
By using below code we can get upload app bar
<Button x:Name="BTNUpload" AutomationProperties.Name="upload" Style="{StaticResource UploadAppBarButtonStyle}"/>
my question is how to create custom app bars?
Like they say in msdn: just customize and add that code in your XAML.
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
</StackPanel>
</Grid>
</AppBar>
Related
I am using Material Design for WPF. I am trying to use Dialogs.
Here is my dialog content:
<materialDesign:DialogHost.DialogContent>
<Label></Label>
</materialDesign:DialogHost.DialogContent>
I have also popup box with buttons what generate dialogs. Popup dialog is inside of DialogHost as below:
<materialDesign:DialogHost HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="8">
<materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionAccentPopupBox}" PlacementMode="BottomAndAlignCentres">
<materialDesign:PopupBox.ToggleCheckedContent>
<materialDesign:PackIcon Kind="Close" Width="24">
</materialDesign:PopupBox.ToggleCheckedContent>
<StackPanel>
<Button ToolTip="Add Audio" Background="#449AB8" BorderBrush="#449AB8" Command="{Binding AddAudioCommand}">
<materialDesign:PackIcon Foreground="White" Kind="Microphone" />
</Button> <!-- This Command is working-->
<Button ToolTip="Add Picture" Background="#449AB8" BorderBrush="#449AB8" Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}">
<materialDesign:PackIcon Foreground="White" Kind="Camera" />
<Button.CommandParameter>
<StackPanel Margin="16">
<TextBlock HorizontalAlignment="Center" FontSize="15">
Add Image
</TextBlock>
<Button Style="{StaticResource MaterialDesignFlatButton}" IsDefault="True" Margin="0 10 10 0" Command="{Binding Path=AddPictureCommand}">
Attach from disc
</Button>
<Button Style="{StaticResource MaterialDesignFlatButton}" IsCancel="True" Margin="0 8 8 0">
Take a photo
</Button>
<Button Style="{StaticResource MaterialDesignFlatButton}" IsCancel="True" Margin="0 8 8 0" Command="materialDesign:DialogHost.CloseDialogCommand">
<Button.CommandParameter>
<system:Boolean>False</system:Boolean>
</Button.CommandParameter>
Discard
</Button>
</StackPanel>
</Button.CommandParameter>
</Button>
</stackpanel>
...
As I understand I am sending layout of Dialog to DialogContent. However first button's command is working (Add Audio).
Second button 'Add Picture' sends StackPanel to DialogContent. Dialog is working, it does appear but my Command doesn't work. It's weird because Command to close is working.
The problem is it doesn't get into Command Execute method.
I think that it isn't weird that CloseDialogCommand is executing - it indicates to your Dialog.
And you are trying to execute AddPictureCommand at context of this Dialog.
Try to find out how to pass your parent as a DataContext or maybe (probably better idea) use dedicated MVVM solution to bind content od dialog (your StackPanel) with some code.
There are few solutions of dealing with dialogs on wiki of MaterialDesign project
I am new to WPF,and have written a simple hello world type application in order to get started. The code I have so far is shown below:
WPF XAXML
<Window x:Name="wndMain" x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ews="clr-namespace:ExtraWindowStyles"
ResizeMode="NoResize"
ews:ExtraWindowStyles.CanMinimize="false"
ews:ExtraWindowStyles.CanMaximize="false"
Title="Hello World" Height="501.492" Width="842.285">
<Grid>
<GroupBox Header="Input Parameters" HorizontalAlignment="Left" Height="173" Margin="10,25,0,0" VerticalAlignment="Top" Width="801" >
<StackPanel Orientation="Horizontal" Margin="0,0,96,0">
<StackPanel Margin="10">
<Label FontWeight="Bold">First Group</Label>
<RadioButton x:Name="opt11">Option 1 - 1</RadioButton>
<RadioButton x:Name="opt12">Option 1 - 2</RadioButton>
<RadioButton x:Name="opt13">Option 1 - 3</RadioButton>
</StackPanel>
<StackPanel Margin="10">
<Label FontWeight="Bold" Content="Second Group"/>
<RadioButton x:Name="opt21" Content="Option 2 - 1"/>
<RadioButton x:Name="opt22" Content="Option 2 - 2"/>
<RadioButton x:Name="opt23" Content="Option 2 - 3"/>
</StackPanel>
</StackPanel>
</GroupBox>
<Separator HorizontalAlignment="Left" Height="80" Margin="17,203,0,0" VerticalAlignment="Top" Width="794"/>
<Button x:Name="btnSubmit" Content="Submit" HorizontalAlignment="Left" Height="34" Margin="632,203,0,0" VerticalAlignment="Top" Width="179" Click="btnExplore_Click" />
<Label Content="Results:" HorizontalAlignment="Left" Height="28" Margin="10,242,0,0" VerticalAlignment="Top" Width="161"/>
<Label Content="My App" HorizontalAlignment="Left" Height="23" Margin="696,439,0,0" VerticalAlignment="Top" Width="130" FontSize="9"/>
<TextBlock>
<Hyperlink NavigateUri="http://www.google.com" RequestNavigate="Hyperlink_RequestNavigate">
Click Here
</Hyperlink>
</TextBlock>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="162" Margin="17,270,0,0" Stroke="Black" VerticalAlignment="Top" Width="794"/>
<Label x:Name="lblResult" Content="" HorizontalAlignment="Left" Height="157" Margin="17,275,0,0" VerticalAlignment="Top" Width="794"/>
</Grid>
</Window>
Code Behind..
private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
{
Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
e.Handled = true;
}
If I comment out the Hyperlink control XAML (and its related backend code), I am able to select options, click the Submit button etc.
However, if I uncomment the Hyperlink control (and its associated backend code), The only thing that remains clickable, is the Url on the form - what's going on?
Just position your TextBlock and it won't take all space in the window and cover everything :
<TextBlock Width="100" Height="30">
<Hyperlink Background="Red" NavigateUri="http://www.google.com" >
Click Here
</Hyperlink>
</TextBlock>
Because the TextBlock is after submit button in XAML it is over.
You could also set Margin to position the TextBlock
Layout knowledge
Elements in a grid Stretch Horizontally and Vertically if no alignment is set.
Useful tip : If you click on the TextBlock tag, you'll see the extent of the TextBlock in the design view.
Often useful
A simple button with a flyout that contains a ProgressRing.
<Button Name="cmdStart" Content="Start" HorizontalAlignment="Center" Margin="5,0,5,0">
<Button.Flyout>
<Flyout Placement="Top">
<StackPanel Orientation="Vertical">
<ProgressRing IsActive="True" Width="30" Height="30"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Username" FontSize="16" Width="90" VerticalAlignment="Center"/>
<PasswordBox Name="txtUsername" Width="100" Margin="10,5,5,5"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Password" FontSize="16" Width="90" VerticalAlignment="Center"/>
<PasswordBox Name="txtPassword" Width="100" Margin="10,5,5,5"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<Button Name="cmdLoginProceed" Content="Login" Margin="5" Tapped="cmdLoginProceed_Tapped"/>
<Button Name="cmdLoginCancel" Content="Cancel" Margin="5" Tapped="cmdLoginCancel_Tapped"/>
</StackPanel>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
Tap on the button, the flyout pops up. No ProgressRing. Close the flyout and tap on the button again, flyout pops up and there it is!
If the flyout is replaced by a Grid or StackPanel (sets as Collapsed) and changed to Visible when tap on the button in button's code, ProgressRing shows as expected.
What have I done wrong?
The ProgressRing in code serves no meaning yet, just to highlight the issue
Edit: Is it possible issues with my installed tool & library version.
My setup:
Microsoft Visual Studio 2015 Version 14.0.23107.0 D14REL
Microsoft .NET Framework Version 4.6.00079
Visual C# 2015 Microsoft Visual C# 2015
Visual Studio Tools for Universal Windows Apps 14.0.23121.00 D14OOB
how i say in title, i have a datatemplate for a Telerik RadTileView, in the large content i have a toolbar with a play button, the idea is that when a user click this button, the images in the tile view change automatically, i already do that but i need change the image inside the play button with a stop icon, this is my data template:
<DataTemplate x:Key="contentTemplate">
<telerik:RadFluidContentControl>
<telerik:RadFluidContentControl.Content>
<Border>
<Image Source="{Binding Frame}" />
</Border>
</telerik:RadFluidContentControl.Content>
<telerik:RadFluidContentControl.LargeContent>
<Grid>
<Grid>
<Image Source="{Binding Frame}" />
</Grid>
<Border BorderBrush="Black" BorderThickness="1" Background="#80000000" Height="80" VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Style="{StaticResource BotonGrande}" Name="BotonImagenAtras" Click="BotonImagenAtras_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/izquierda.png" />
</Button>
<Button Style="{StaticResource BotonGrande}" Name="BotonImagenesPlay" Click="BotonImagenesPlay_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/play_on.png" />
</Button>
<Button Style="{StaticResource BotonGrande}" Name="BotonCaputarImagen" Click="BotonCaputarImagen_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/captura_img_on.png" />
</Button>
<Button Style="{StaticResource BotonGrande}" Name="BotonImagenAdelante" Click="BotonImagenAdelante_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/derecha.png" />
</Button>
</StackPanel>
</Border>
</Grid>
</telerik:RadFluidContentControl.LargeContent>
</telerik:RadFluidContentControl>
</DataTemplate>
Thanks for your help!
Regards
try attaching an event an change the image when the event get fire. you can try with Javascript if you are running your app in a browser.
Navigation Guidelines does mention that we can include thumbnails in the Navigation bar(top app bar) for buttons. I have searched for examples but found none.
I have created a basic top app bar.
Could someone help me out?
Appbar with thumbnail doesn't need any special code. Check the below given code. You can put anything within Grid.
<Page.TopAppBar>
<AppBar Height="180" Background="Tan">
<StackPanel Orientation="Horizontal">
<Grid Height="160" Width="200" Background="Red" Margin="10"/>
<Grid Height="160" Width="200" Background="Green" Margin="10"/>
<Grid Height="160" Width="200" Background="Yellow" Margin="10"/>
<Grid Height="160" Width="200" Background="Blue" Margin="10"/>
</StackPanel>
</AppBar>
</Page.TopAppBar>