I am using Silverlight 3 + VSTS 2008. I have a image (Multiscale image control) and I place tooltip on this image. The function of Tooltip works fine. Since the image is big (about 500 * 500 size), and since end user could move mouse on the picture, and I want to display tooltip position along with the mouse (i.e. when mouse moves, I want to tooltip move along with the mouse). Currently, the tooltip displays at a fixed position.
Here is my current XAML code, any ideas how to solve this issue?
<MultiScaleImage x:Name="msi" Height="500" Width="500">
<ToolTipService.ToolTip>
<ToolTip Content="Here is a tool tip" Name="DeepZoomToolTip"></ToolTip>
</ToolTipService.ToolTip>
</MultiScaleImage>
I ended up having a similar issue and solved the issue by using a popup. This post contained the core solution. Here is the suggested XAML from the other post:
<Canvas x:Name="LayoutRoot" Background="White">
<Image Source="/pretty-pretty.png" MouseMove="Image_MouseMove" MouseLeave="Image_MouseLeave"/>
<Popup Name="DeepZoomToolTip">
<Border CornerRadius="1" Padding="1" Background="Azure" IsHitTestVisible="False">
<TextBlock Text="Here is a tool tip" />
</Border>
</Popup>
</Canvas>
And here is the suggested, this would go in the code behind:
private void Image_MouseMove(object sender, MouseEventArgs e)
{
DeepZoomToolTip.IsOpen = true;
DeepZoomToolTip.HorizontalOffset = e.GetPosition(LayoutRoot).X;
DeepZoomToolTip.VerticalOffset = e.GetPosition(LayoutRoot).Y;
}
private void Image_MouseLeave(object sender, MouseEventArgs e)
{
DeepZoomToolTip.IsOpen = false;
}
The tooltip control is designed to pop up roughly where the mouse meets the element to which it's bound, and can't respond to move events. Below is a custom tooltip example. I added the background and the z-index so that the TextBlock would appear over the image. The offset from the mouse position keeps the tooltip away from the mouse cursor, so that the movement is animated smoothly.
XAML:
<UserControl x:Class="ImageEditor.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="800">
<Canvas x:Name="MainCanvas">
<Border x:Name="tt" Background="Gray" Visibility="Collapsed" Canvas.ZIndex="10">
<TextBlock x:Name="txtTooltip" Width="90" Height="20" Text="This is a tooltip" ></TextBlock>
</Border>
<Image x:Name="theImage" Source="images/image.jpg" Width="300" MouseEnter="theImage_MouseEnter"
MouseMove="theImage_MouseMove" MouseLeave="theImage_MouseLeave">
</Image>
</Canvas>
</UserControl>
Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace ImageEditor
{
public partial class TestControl : UserControl
{
private bool _tooltipVisible = false;
public TestControl()
{
InitializeComponent();
}
private void theImage_MouseMove(object sender, MouseEventArgs e)
{
if (_tooltipVisible)
{
tt.SetValue(Canvas.TopProperty, e.GetPosition(theImage).Y - (5 + txtTooltip.Height));
tt.SetValue(Canvas.LeftProperty, e.GetPosition(theImage).X - 5);
}
}
private void theImage_MouseEnter(object sender, MouseEventArgs e)
{
_tooltipVisible = true;
tt.Visibility = Visibility.Visible;
}
private void theImage_MouseLeave(object sender, MouseEventArgs e)
{
_tooltipVisible = false;
tt.Visibility = Visibility.Collapsed;
}
}
}
Related
I'm making an image viewer. I have a mouse event that is supposed to trigger when an image (or child of StackPanel in this case), is clicked. The event is triggered as intended. The problem is, since the pathfile of the images is different depending on whichever is selected (in which directory, etc.), I just don't know how to get the pathfile of the specific image that is currently clicked on. The directory depends on whichever folder is loaded, so the pathfile could be different everytime.
If you scroll all the way down to Image_Load(), I have the Pic.Fill which is a reference to the rectangle that is being filled with the image. I'm trying to find the first parameter for Uri(_,_), which is supposed to be where the #"path" of the current image is.
using System;
using System.IO;
using Microsoft.Win32;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Drawing;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Forms;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApp1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
FolderBrowserDialog fbd = new FolderBrowserDialog();
List<string> paths = new List<string>();
string[] extension = new[] { ".jpg", ".png", ".jpeg", ".gif", ".bmp", ".tif", ".tiff" };
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e) {
if (fbd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
string[] files = Directory.GetFiles(fbd.SelectedPath);
FileLocation.Text = fbd.SelectedPath;
}
}
private void OpenButton_Click(object sender, RoutedEventArgs e)
{
LoadPhotos();
}
private void LoadPhotos()
{
try
{
DirectoryInfo di = new DirectoryInfo(fbd.SelectedPath);
foreach (var fi in di.GetFiles().Where(f => extension.Contains(f.Extension.ToLower())).ToArray())
{
paths.Add(fi.FullName);
}
Photos.ItemsSource = paths;
} catch (Exception e)
{
Console.WriteLine("File not found.", e.Source);
}
}
private void Image_Load(object sender, MouseButtonEventArgs e)
{
// What is the reference here?
Pic.Fill = new ImageBrush { ImageSource = new BitmapImage(new Uri(/*Insert pathfile here*/, UriKind.Absolute)) };
}
}
}
Here's my .xaml. I've analyzed it to see a reference but the only thing that stands out is the Image Source, which I've tagged with a comment. It's set to { Binding . } which I'm going to assume means, whatever image is referenced. But how do I connect that variable reference to my Image_Load()? (which is declared on the instantiation of ListBox)
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="1081" Width="1720.5">
<Grid Margin="0,0,2,-0.578">
<Button x:Name="OpenButton" Content="Load" HorizontalAlignment="Left" Height="44" Margin="1166.374,932.042,0,0" VerticalAlignment="Top" Width="145.666" Background="#FFDDDDDD" FontSize="24" Click="OpenButton_Click"/>
<Button x:Name="BrowseButton" Content="Browse" HorizontalAlignment="Left" Height="44" Margin="58.666,932.042,0,0" VerticalAlignment="Top" Width="134.166" Background="#FFDDDDDD" FontSize="24" Click="Button_Click"/>
<Rectangle x:Name="Pic" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="878.767" Margin="58.666,34.733,0,0" Stroke="Black" VerticalAlignment="Top" Width="1253.374"/>
<ScrollViewer VerticalScrollBarVisibility="Visible" Width="327.46" HorizontalAlignment="Left" Margin="1339.04,34.733,0,137.078" RenderTransformOrigin="0.5,0.5" >
<StackPanel Width="327.46" RenderTransformOrigin="0.516,0.496" HorizontalAlignment="Left" VerticalAlignment="Center" Height="878.085">
<ListBox x:Name="Photos"
Grid.Row="2" Grid.Column="1" Height="876" PreviewMouseDown="Image_Load">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="300" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
/* Image Source? */
<Image Source="{Binding .}" Grid.Column="0"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
<TextBlock x:Name="FileLocation" HorizontalAlignment="Left" Height="44" Margin="192.832,948.542,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="973.542" Foreground="#FF515151" TextAlignment="Center" FontSize="14"/>
</Grid>
</Window>
I've been learning on the way using Blend-- some youtube tutorials here and there. I've tried to look for a solution online but all the questions about it usually involve a static and specific directory. This is my first program and the only thing I need is that darn path file reference. There are so many object reference so I just don't even know how to wrap my head around it, being so unfamiliar with these classes. Some assistance would be very much appreciated! :)
I develop UWP app with C# and XAML. I try to implement drag&drop functionality.
Here is a simple app to demonstrate how I try to do it. The app has two borders - one border is dragged, and second one is for drop. Also I write informaton about events to output.
Version 1 (using CanDrag=true on a dragged item)
<Page x:Class="UWP_DragDrop.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP_DragDrop"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border x:Name="draggedItem"
Grid.Row="0"
Height="100"
Width="150"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Red"
CanDrag="True"
DragStarting="draggedItem_DragStarting"
DropCompleted="draggedItem_DropCompleted">
<TextBlock Text="Drag this item"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<Border x:Name="dropArea"
Grid.Row="1"
Height="100"
Width="150"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Blue"
AllowDrop="True"
DragEnter="dropArea_DragEnter"
Drop="dropArea_Drop">
<TextBlock Text="Drop here"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</Grid>
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace UWP_DragDrop
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void draggedItem_DragStarting(UIElement sender, DragStartingEventArgs args)
{
Debug.WriteLine("draggedItem_DragStarting");
}
private void draggedItem_DropCompleted(UIElement sender, DropCompletedEventArgs args)
{
Debug.WriteLine("draggedItem_DropCompleted");
}
private void dropArea_DragEnter(object sender, DragEventArgs e)
{
Debug.WriteLine("dropArea_DragEnter");
e.AcceptedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.Copy;
}
private void dropArea_Drop(object sender, DragEventArgs e)
{
Debug.WriteLine("dropArea_Drop");
}
}
}
1) It works correctly when I run it in Visual Studio for LocalMachine and for Simulator (but only for mouse input). In output I have the following:
draggedItem_DragStarting
dropArea_DragEnter
dropArea_Drop
draggedItem_DropCompleted
2) When I try to run it in Simulator (touch mode) - I can't drag item. No one event is fired (output is empty)
3) When I try to run it in Windows 10 Mobile emulator, it does not work. What I see in output is:
draggedItem_DragStarting
draggedItem_DropCompleted
As soon as I move the element - DropCompleted event fires.
Version 2 (using StartDragAsync)
I removed CanDrag=true for dragged item, and start drag operation by StartDragAsync.
<Page x:Class="UWP_DragDrop.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP_DragDrop"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border x:Name="draggedItem"
Grid.Row="0"
Height="100"
Width="150"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Red"
PointerMoved="draggedItem_PointerMoved"
DragStarting="draggedItem_DragStarting">
<TextBlock Text="Drag this item"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<Border x:Name="dropArea"
Grid.Row="1"
Height="100"
Width="150"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Blue"
AllowDrop="True"
DragEnter="dropArea_DragEnter"
Drop="dropArea_Drop">
<TextBlock Text="Drop here"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</Grid>
using System.Diagnostics;
using Windows.ApplicationModel.DataTransfer;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
namespace UWP_DragDrop
{
public sealed partial class MainPage : Page
{
IAsyncOperation<DataPackageOperation> _dragOperation;
public MainPage()
{
this.InitializeComponent();
}
private void draggedItem_PointerMoved(object sender, PointerRoutedEventArgs e)
{
if (e.Pointer.IsInContact && (_dragOperation == null))
{
Debug.WriteLine("draggedItem_StartDragAsync");
_dragOperation = draggedItem.StartDragAsync(e.GetCurrentPoint(draggedItem));
_dragOperation.Completed = DragCompleted;
}
}
private void DragCompleted(IAsyncOperation<DataPackageOperation> asyncInfo, AsyncStatus asyncStatus)
{
_dragOperation = null;
Debug.WriteLine("draggedItem_DragCompleted");
}
private void draggedItem_DragStarting(UIElement sender, DragStartingEventArgs args)
{
Debug.WriteLine("draggedItem_DragStarting");
}
private void dropArea_DragEnter(object sender, DragEventArgs e)
{
Debug.WriteLine("dropArea_DragEnter");
e.AcceptedOperation = DataPackageOperation.Copy;
}
private void dropArea_Drop(object sender, DragEventArgs e)
{
Debug.WriteLine("dropArea_Drop");
}
}
}
1) Desktop and Simulator (mouse mode) works.
2) Simulator (touch mode) now works too.
3) Windows 10 mobile emulator does not work. DropCompleter fires right after DragStarting again.
How can I make drag&drop work on Windows 10 mobile? Why version 1 does not work in scenario 2 and 3, and version 2 does not work in scenario 3?
Unfortunately, it seems like customize drag is currently not supported on emulator and mobile yet. Details please reference this known issue. As Raymond mentioned:
You can drag/drop items within a listview, and any UI element can be a drop target, but you don't get dragging to another process or drag customization.
At this time windows 10 doesn't support a full-fledged drag and drop feature.
(C # Application for WPF)
I have a problem and I have to "draw" a coordinate system and enter only the coordinates (without lines) as seen in the picture.
I would like to use a library, because I also have to draw a frame and I thought with a library would it be easy.
So I've discovered GnuPlot, Oxyplot and draw myself. GnuPlot is unfortunately stupid since it has no library for a C # application. (Or if you have one, please let me know). Therefore, I used OxyPlot, but unfortunately OxyPlot shows me only the coordinate system.
Now to my question.
Is there anything better to draw coordinate systems with the coordinates?
It should meet the following requirements:
It should be a preview application, that is, if I change the size it should happen directly
I would like to make a frame, so it should help me in the process
there should be a library
it should be for a C # application
I would like to be first point marks for the X, Y coordinates, but later it should be circles with a circle diameter
later as a Bitmap
As mentioned above, I've used it with OxyPlot, but unfortunately it does not draw a graph (I used the sample documentation)
Maybe you have better ideas / a solution for OxyPlot.
Thanks in advance and I am happy about every reply.
XAML:
<Window x:Class="TestOxyPlot.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:oxy="http://oxyplot.org/wpf"
xmlns:local="clr-namespace:TestOxyPlot"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<oxy:Plot x:Name="oxyPlot" Title="{Binding Title}" Margin="207,53,0,0">
<oxy:Plot.Series>
<oxy:LineSeries ItemsSource="{Binding Points}"/>
</oxy:Plot.Series>
</oxy:Plot>
<TextBox x:Name="textBox" HorizontalAlignment="Left" Height="23" Margin="44,64,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" MouseLeave="textBox_MouseLeave" TextChanged="textBox_TextChanged"/>
<TextBox x:Name="textBox1" HorizontalAlignment="Left" Height="23" Margin="44,101,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" TextChanged="textBox1_TextChanged"/>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="68,174,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using OxyPlot;
namespace TestOxyPlot
{
/// <summary>
/// Interaktionslogik für MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Title = "Example 2";
this.Points = new List<DataPoint>
{
new DataPoint(0, 4),
new DataPoint(10, 13),
new DataPoint(20, 15),
new DataPoint(30, 16),
new DataPoint(40, 12),
new DataPoint(50, 12)
};
}
public string Title { get; private set; }
public IList<DataPoint> Points { get; private set; }
private void textBox_MouseLeave(object sender, MouseEventArgs e)
{
}
private void textBox_TextChanged(object sender, TextChangedEventArgs e)
{
try
{
oxyPlot.Width = Int32.Parse(textBox.Text);
}
catch (Exception error)
{
MessageBox.Show("Message: " + error);
}
}
private void button_Click(object sender, RoutedEventArgs e)
{
}
private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
{
try
{
oxyPlot.Width = Int32.Parse(textBox.Text);
}
catch (Exception error)
{
MessageBox.Show("Message: " + error);
}
}
}
}
Add this code
DataContext = this;
after this line
InitializeComponent();
and it will show the graph. Also, in order to remove the line and just draw the Markers, use something like this LineSeries:
<oxy:LineSeries ItemsSource="{Binding Points}" LineStyle="None" MarkerType="Circle" MarkerSize="5" MarkerFill="Black"/>
Edit
private void Button_Click(object sender, RoutedEventArgs e)
{
double randomNumX;
double randomNumY;
int h = DateTime.Now.Hour;
int m = DateTime.Now.Minute;
int s = DateTime.Now.Second;
String u = h.ToString() + m.ToString() + s.ToString();
int iu = Int32.Parse(u);
Random zufall = new Random(iu);
Points = new List<DataPoint>();
for (int i = 0; i < 10; i++)
{
randomNumX = zufall.NextDouble() * (10 - -10) + -10;
randomNumY = zufall.NextDouble() * (10 - -10) + -10;
Points.Add(new DataPoint(randomNumX, randomNumY));
}
ls.ItemsSource = Points;
}
and
<DockPanel>
<Button DockPanel.Dock="Top" Click="Button_Click" Content="Click Me"/>
<oxy:Plot x:Name="oxyPlot" Title="{Binding Title}">
<oxy:Plot.Axes>
<oxy:LinearAxis Position="Bottom" />
<oxy:LinearAxis Position="Right" MinimumPadding="0.1" MaximumPadding="0.1"/>
</oxy:Plot.Axes>
<oxy:Plot.Series>
<oxy:LineSeries x:Name="ls" ItemsSource="{Binding Points}" LineStyle="None" MarkerType="Circle" MarkerSize="5" MarkerFill="Black"/>
</oxy:Plot.Series>
</oxy:Plot>
</DockPanel>
By the way, for some reason, using ObservationCollection or InvalidatePlot(true) didn't work
I'v a progressbar and an image.
When Progress Bar value is 50, image loaded by 50%.
I tried to add image as the progressbar foreground, but it have green shade. So ugly.
How can I do this?
To run this sample, you need a snake image which you can get from http://res.freestockphotos.biz/pictures/16/16242-illustration-of-a-green-snake-pv.png. I have used this url directly, but your should download image first and then use it.
You need a control template for your ProgressBar because you want to show percentage status too.
Otherwise normal ProgressBar would do.
Code can be used as is :
<Window x:Class="WpfControlTemplates._32794074.Win32794074"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Win32794074" Height="600" Width="1000">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="397*"/>
<RowDefinition Height="173*"/>
</Grid.RowDefinitions>
<ProgressBar x:Name="PBarCustom" Width="958" Height="200" Maximum="958" Value="958" Foreground="#FFE6E61F" Margin="17,185,17,11.932" ValueChanged="PBarCustom_ValueChanged">
<ProgressBar.Background>
<ImageBrush ImageSource="http://res.freestockphotos.biz/pictures/16/16242-illustration-of-a-green-snake-pv.png"/>
</ProgressBar.Background>
<ProgressBar.Template>
<ControlTemplate>
<Grid Background="{TemplateBinding Background}">
<Rectangle x:Name="Thumb" HorizontalAlignment="Left" Fill="#FFC5EA1F" Stroke="#FF0DB442" Width="{TemplateBinding Width}" />
<Ellipse Fill="#FF7DEEDE" Height="124" Stroke="#FF0DB442" Width="150" VerticalAlignment="Center" HorizontalAlignment="Center" Opacity="0.3"/>
<Label x:Name="tbStatus" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontWeight="Bold" FontSize="75" Foreground="#FF21BD76" Content="0" />
</Grid>
</ControlTemplate>
</ProgressBar.Template>
</ProgressBar>
<Button x:Name="BtnLoadSnake" Content="Load Snake" HorizontalAlignment="Left" Margin="462,14.068,0,0" VerticalAlignment="Top" Width="75" Click="BtnLoadSnake_Click" Grid.Row="1"/>
</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Threading;
namespace WpfControlTemplates._32794074
{
/// <summary>
/// Interaction logic for Win32794074.xaml
/// </summary>
public partial class Win32794074 : Window
{
public Win32794074()
{
InitializeComponent();
}
DispatcherTimer timer;
private void BtnLoadSnake_Click(object sender, RoutedEventArgs e)
{
BtnLoadSnake.IsEnabled = false;
PBarCustom.Value = PBarCustom.Maximum;
Rectangle thumb = (Rectangle)PBarCustom.Template.FindName("Thumb", PBarCustom);
thumb.Width = PBarCustom.Value;
Label status = (Label)PBarCustom.Template.FindName("tbStatus", PBarCustom);
status.Content = ((int)(100 - ((100 * PBarCustom.Value) / PBarCustom.Maximum))).ToString();
Dispatcher disp = PBarCustom.Dispatcher;
EventHandler pBarCallbackHandler = new EventHandler(pBarCallback);
timer = new DispatcherTimer(TimeSpan.FromSeconds(0.5), DispatcherPriority.Normal, pBarCallback, disp);
}
private void pBarCallback(object sender, EventArgs e)
{
PBarCustom.Value -= 13;
Rectangle thumb = (Rectangle)PBarCustom.Template.FindName("Thumb", PBarCustom);
thumb.Width = PBarCustom.Value;
Label status = (Label)PBarCustom.Template.FindName("tbStatus", PBarCustom);
status.Content = ((int)(100 - ((100 * PBarCustom.Value) / PBarCustom.Maximum))).ToString();
if (PBarCustom.Value == 0)
timer.Stop();
}
private void PBarCustom_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if(e.NewValue == 0)
BtnLoadSnake.IsEnabled = true;
}
}
}
i had similar scenario.
if you want the scroll bar to be just a rectangle,
easiest way to make it:
1- add an image to your window.
2- put a grid on it in such a way that the grid hides the image.
3- programatically change the width or height of the grid.
tell me if you needed an example code.
I have an image within a border:
XAML:
<Window x:Class="TestProgram.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Height="350" Width="525">
<DockPanel>
<Grid DockPanel.Dock="Top">
<!---->
</Grid>
<ListBox DockPanel.Dock="Left"/>
<Grid DockPanel.Dock="Top">
<!---->
</Grid>
<Border x:Name="testBorder" ClipToBounds="True" Background="Gray">
<Image x:Name="testImage" Source="test.png" Opacity="1" Stretch="None"
MouseLeftButtonDown="testImage_MouseLeftButtonDown"
MouseLeftButtonUp="testImage_MouseLeftButtonUp"
MouseMove="testImage_MouseMove"
/>
</Border>
</DockPanel>
</Window>
C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace TestProgram
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
private Point start;
private Point origin;
public MainWindow()
{
InitializeComponent();
TransformGroup group = new TransformGroup();
TranslateTransform tt = new TranslateTransform();
group.Children.Add(tt);
testImage.RenderTransform = group;
}
private void testImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
testImage.CaptureMouse();
TranslateTransform tt = (TranslateTransform)((TransformGroup)testImage.RenderTransform).Children.First(tr => tr is TranslateTransform);
start = e.GetPosition(testBorder);
origin = new Point(tt.X, tt.Y);
}
private void testImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
testImage.ReleaseMouseCapture();
}
private void testImage_MouseMove(object sender, MouseEventArgs e)
{
if (testImage.IsMouseCaptured)
{
TranslateTransform tt = (TranslateTransform)((TransformGroup)testImage.RenderTransform).Children.First(tr => tr is TranslateTransform);
Vector v = start - e.GetPosition(testBorder);
tt.X = origin.X - v.X;
tt.Y = origin.Y - v.Y;
}
}
}
}
I have added click & drag panning functionality, but the displayed size of the image is limited by the surrounding border, leaving only the top left corner of the image visible when the image is panned. This is the case even when i remove ClipToBounds="True"
ActualHeight and ActualWidth have values corresponding to the image's natural height and width, so why is the image clipped? What can I do to make the full image visible?
If you really want the border to overlay on top of the the image, then put them both in a <Grid> or <Canvas>
<Canvas>
<Image/>
<Borde/>
</Canvas>