Print Preview in silverlight/xaml - silverlight

I am new to Silverlight, i have given a task to create a print preview template for a GIS Web Application for my company. My requirement is as follows:
1) When i click on the print preview button on my mainpage it should popup a new print preview window
2) The preview window should have mainpage content
3) It should have a print button to print it.
4) It should have next page and previous page option
5) A zoom icon/slider to zoom in and zoom out the preview contents
Upto now i have just a added a preview button on my mainpage, which on click opening a new xaml window and on that window i have set contents like this.
Here is the view of PrintPreview.xaml
<Grid x:Name="LayoutRoot" Background="White">
<Canvas x:Name="m_canvas" Height="490" VerticalAlignment="Top" Margin="0,0,60,0">
<Button x:Name="m_btn_print" Canvas.Top="5" Canvas.Left="5" Width="32" Height="32" Click="m_btn_print_Click">
<Image Source="Images/print.png" Stretch="Fill" />
<ToolTipService.ToolTip>
<ToolTip Content="Print"></ToolTip>
</ToolTipService.ToolTip>
</Button>
<Button x:Name="m_btn_prev_page" Canvas.Top="5" Canvas.Left="45" Width="32" Height="32" Click="m_btn_prev_page_Click">
<Image Source="Images/arrow.left.png" Stretch="Fill"/>
<ToolTipService.ToolTip>
<ToolTip Content="Previous Page"></ToolTip>
</ToolTipService.ToolTip>
</Button>
<Button x:Name="m_btn_next_page" Canvas.Top="5" Canvas.Left="85" Width="32" Height="32" Click="m_btn_next_page_Click">
<Image Source="Images/arrow.right.png" Stretch="Fill"/>
<ToolTipService.ToolTip>
<ToolTip Content="Next Page"></ToolTip>
</ToolTipService.ToolTip>
</Button>
<Slider x:Name="m_sld_size" Minimum="50" Maximum="125" Value="100" SmallChange="5" LargeChange="5" ValueChanged="m_sld_size_ValueChanged"
Canvas.Top="15" Canvas.Left="245" VerticalAlignment="Top" HorizontalAlignment="Right" Width="80" />
<TextBlock x:Name="m_lbl_size" Canvas.Top="2" Canvas.Left="265" FontSize="9" Text="Zoom" Foreground="Black" />
<Canvas x:Name="m_canvas_print" Canvas.Top="40" Canvas.Left="5" Width="317" Height="445" Background="White"
VerticalAlignment="Top" HorizontalAlignment="Left">
</Canvas>
</Canvas>
</Grid>
Now what should be my code behind, how should i show the mainpage.xaml content on this preview. Please help its urgent
Thanks in advance.

My first word of advise is not to use a canvas object unless you are filing it in with something that is the same every time you print it. If you are printing dynamic data values that can change based on the time it is printed I would move to a stack panel or grid.
That being said you will need to wire up the print function to print the m_cavas_print object when a user presses the print button. I have added some sample print code below.
PrintDocument pd = new PrintDocument();
pd.PrintPage += (s, e) =>
{
e.PageVisual = m_cavas_print;
};
pd.Print("MainPageContent");
This is the basic principle behind printing. You can put this in your print button click event handler and it will print whatever is in the canvas. I used a lambda expression here to handle the print page event but you can use a separate method as well.

Related

C# WPF MaterialDesign In Xaml Toolkit DialogHost. The background window behind the dialog box is not darkened

The background window is not darkened when DialogHost is called, meaning the dialog is not modal. The back window remains active. Although in the Github example works correctly. I don't know where I'm going.
XAML:
<materialDesign:DialogHost x:Name="DH_getLoadingList"
HorizontalAlignment="Center"
VerticalAlignment="Center"
CloseOnClickAway="True"
OverlayBackground="{DynamicResource PrimaryHueDarkBrush}" DialogTheme="Inherit" Grid.RowSpan="5" Grid.ColumnSpan="5">
<materialDesign:DialogHost.DialogContent>
<StackPanel Margin="16" Orientation="Vertical">
<Label Content="The row will be deleted." FontSize="16" />
<StackPanel Orientation="Horizontal">
<Button Content="OK" Style="{DynamicResource MaterialDesignFlatButton}" IsDefault="True" Margin="0,8,8,0" />
<Button Content="Cancel" Style="{DynamicResource MaterialDesignFlatButton}" Margin="0,8,8,0" />
</StackPanel>
</StackPanel>
</materialDesign:DialogHost.DialogContent>
</materialDesign:DialogHost>
C# code:
private void GettingFuelListCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
DH_getLoadingList.IsOpen = true;
}
UPDATED
I just had a misunderstanding the DialogHost structure. The correct way is
<Window>
<materialDesign:DialogHost>
<materialDesign:DialogHost.DialogContent>
<--! dialog content ... -->
</materialDesign:DialogHost.DialogContent>
<--! the correct location of the page content ... -->
</materialDesign:DialogHost>
<--! incorrect location of the page content ... -->
<Window/>
I know this is more than a year late. But when you put these properties:
HorizontalAlignment="Center"
VerticalAlignment="Center"
The overlay background will not appear, if you remove these, the problem will go away. The dialog will always be centered so don't need to worry about it's relative position to it's parent container.

WPF : ListBox.ItemTemplate doesn't react when click on text or image wpf xaml

I'm new to Xaml and WPF . I'm using the following code to extract botton title and image from RSS feeds .
The problem that the botton react only when user click on the border ... it dosen't react when user click on text or image .
<ListBox.ItemTemplate >
<DataTemplate >
<Button Background="{Binding C:AccentColors}" Width="400" Height="100" HorizontalAlignment="Left" >
<Grid Width="400" Height="100" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding XPath=enclosure/#url}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock TextWrapping="Wrap" Text="{Binding XPath=title}" FontWeight="Bold" Grid.Column="2"/>
</Grid>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You have to add the Click event in your button.
<Button Background="{Binding C:AccentColors}" Width="400" Height="100" HorizontalAlignment="Left" Click="MethodNameHere".....
and also you have to create and implement the method in the Window C# file
The common mistake is that somebody placed TextBlock on top of button without realizig it, because TextBlock has transparent Background.
Visually, the Text of TextBlock may be outside Button, but since TextBlock alignment is set to strech by default, it fills entire area.
hard to say if this is your case...
<Grid>
<Button Content="I'm not working" Margin="0,100,0,0" />
<TextBlock Text="I'm in top left corner" />
<Grid />
if you set TextBlock.Background to Red, you entire grid would be red.
The button is taking the clicks. You need a handler, either a command binding or if you're not using MVVM - a code behind method:
<Button Click="ButtonBase_OnClick"
Handler will look like this:
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
}

Set keyboard shortcut for a WPF Button with no text on it

I have a button that looks like this:
<Button Margin="3,0,2,0" Command="{Binding AddCommand}">
<StackPanel Orientation="Horizontal">
<Image Width="24" Stretch="Uniform"
Source="pack://application:,,,/MyProj;component/Images/Add.png"/>
</StackPanel>
</Button>
It does not have any text on it. But if it did, it would have this inside the StackPanel:
<Label Margin="2,0,1,0" Content="_Add" />
This would allow Alt+A to be the keyboard command for the button.
Is there a way to set this without having text on the button?
NOTE the AddCommand is a DelegateCommand (and it needs to be). So the RoutedCommand way of setting keyboard shortcuts will not work. (Not unless there is a way to retrofit a DelegateCommand as a RoutedCommand.)
Turns out this is enough to make it work:
<Button Margin="3,0,2,0" Command="{Binding AddCommand}">
<StackPanel Orientation="Horizontal">
<Image Width="24" Stretch="Uniform"
Source="pack://application:,,,/MyProj;component/Images/Add.png"/>
<Label Margin="0" Width="0" Opacity="0" Content="_Add" />
</StackPanel>
</Button>
Bit of a hack as it adds a Label that is not visible. But it works good enough.

Change content of ImageButton programatically (WPF)

I am using a ImageButton as
<Button Width="80" Height="25"
VerticalAlignment="Top"
HorizontalAlignment="Right"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Margin="0,0,1.5,0"
Name="btnActivate"
Click="OnActivate">
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="Shutdown.ico"
Width="12" Height="12"
Margin="0,0,5,0"/>
<TextBlock>Activate</TextBlock>
</StackPanel>
</Button>
I want to change the Content of button to 'Deactivate' when I click on it without changing the image. How can I do that? And also I need to some operations based on the content of button in my C# code.
You could just add a name to the TextBlock
<TextBlock Name="textBlock1">Activate</TextBlock>
and use it to modify the content in your OnActivate event handler
textBlock1.Text = "Deactivate";

How to dynamically add controls to a Silverlight Button?

I'm working on a Silverlight Polling control. My goal is to have a Button that contains other controls, so that when a user clicks on this combination, stuff happens.
Here's the basic XAML:
<Button Grid.Row="1" Grid.Column="0" Style="{StaticResource AnswerButton}">
<StackPanel Grid.Row="1" Grid.Column="0" Height="Auto" Width="Auto" Style="{StaticResource StackPnl}">
<TextBox Text="this is a text box" Style="{StaticResource Answer}" />
<ProgressBar Style="{StaticResource PollProgress}" />
</StackPanel>
</Button>
That works fine, but assume I don't have the StackPanel, etc, defined:
<Button Grid.Row="1" Grid.Column="0" Style="{StaticResource AnswerButton}">
</Button>
But that I want to add the StackPanel, TextBox, and ProgressBar at runtime.
Looking at just the first hurdle that I've run into, how do I dynamically add the StackPanel to the Button control?
Alternatively, if someone knows of a better way to do this...
var panel = new StackPanel();
Button.Content = panel;

Resources