Помощь для новичков в WPF

Вот решил помогать начинающим разборатся в WPF, помогу решить различные задачи.
Писать пока в аську с пометкой «Помощь в WPF».
номер – 493-757-девять4девять

Относительные и Абсолютные Path в WPF

В данной статье я расскажу, то над чем боролся пару дней.
Расскажу как не напрягатся с настройкой относительного пути, но работать будет как относительный путь.
Данный метод я буду использовать в написании галереи на WPF, которую я уже начал писать в блоге.

К примеру нам надо загрузить картинку, которая находится С://image_Absolute.png.
Для всех Uri я буду использовать UriKind.RelativeOrAbsolute.
Обязательно забудьте добавить, созданный объект к кому то в Children, в моём случаи я это делаю в главный контейнер «grid».

Image myImage= new Image();
BitmapImage bi = new BitmapImage(new Uri("С://image_Absolute.png", UriKind.RelativeOrAbsolute));
myImage.Source = bi;
grid.Children.Add(myImage);

А теперь загрузим туже картинку только эта картинка будет лежать в каталоге images, которая лежит в корне папки где запускается программа.

Image myImage= new Image();
BitmapImage bi = new BitmapImage(new Uri(Directory.GetCurrentDirectory()+"/images/images_Relative.png", UriKind.RelativeOrAbsolute));
myImage.Source = bi;
grid.Children.Add(myImage);

Directory.GetCurrentDirectory() – этот статический метод находится в пространстве System.IO так что не забудьте его подключить. Этот метод выводит полный путь к каталогу где запущена программа.

Таким образом мы используем относительный путь, хотя и указаываем полный путь к файлу.
В следущей статье я вам укажу как избежать проблемы с отсутвием файлов и папок.

Создание нового проекта WPF

Сейчас расскажу вам как создать новый чистый проект WPF в Microsoft Visual Studio 2008. Создаю статью специально, так как часто буду использовать фразу «Создать новый проект WPF» и что бы избежать лишних вопросов.

1. Запускаем Microsoft Visual Studio 2008
2. Меню File -> new Project (или Ctrl+Shift+N)
3. Выбераем Visual C# -> Wpf Application -> Вводим название проекта и жмем ОК

Теперь коротко, что автоматически создала нам студия:

• Properties – это деректива новичкам не должна быть интересна
• References – это тоже, но скажу что тут хранятся ространства времен(тут мы их по не обходимости можем загружать)
• App.xaml -> App.xaml.cs – это наша точка входа в программу. На это указывает x:Class=»WpfApplication6.App» из этого файла нас отправляют в Window1.xaml, а на это нам указывает строчка StartupUri=»Window1.xaml»
• Window1.xaml -> Window1.xaml.cs – собствено тут мы обычно и начинаем писать код. Студия нам автоматически создает корнейвой элемент мы его можешь свободно изменить на любой другой контейнер. Window1.xaml связан с классом Window1.xaml.cs, на это нам указывает строчка x:Class=»WpfApplication6.Window1″.
  Класс Window1.xaml.cs автоматически создает конструктор в котором есть запуск функции InitializeComponent() – эта функция иницилизирует все объекты созданые XAML кодом.

Собствено и все, думаю вопросов не возникнет

Использование Slider для смены Images

Это моя первая статья, так что прошу писать, что я не так сделал.

Получится нечто такое
Скачать пример с depositfiles

slider image gallery

Скачать пример с depositfiles
Приступим.

1. Создаем новый проект с название SlideImages
2. Создаем новую папку, заливаем в неё 6 изображений.
3. Создаем в XAML главное окно (если вы создавали проект автоматически, то он у вас уже есть)

Изменяем настройки главного окна добавляем

Title="Slide Image" Height="Auto" Width="Auto" SizeToContent="WidthAndHeight" x:Name="SlideImages"

4. Создаем главный контейнер Grid называем его «grid2″ , задаем месторасположение по центру, добавляем градиентный background, создаем 2 строчки (Row) и 6 столбцов (Colum), первой строчке задаем высоту 300 всем остальным столбцам и строчкам высоту и ширину Auto

Его код выглядит так:

<Grid x:Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.Background>
    	<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    		<GradientStop Color="#FF3F0202" Offset="0"/>
    		<GradientStop Color="#FFCF1313" Offset="1"/>
    		<GradientStop Color="#FF167A08" Offset="0.400"/>
    		<GradientStop Color="#FF330A8A" Offset="0.560"/>
    		<GradientStop Color="#FF244248" Offset="0.480"/>
    	</LinearGradientBrush>
</Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="300"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
</Grid>

5. Добавляем в «grid2″ в 1 строку 6 картинок каждый в свой столбец и даем им соотвествующие название «img1″ … «img6″, обязателньо задем высоту и ширину

        <Image VerticalAlignment="Center" x:Name="img1" Height="100" Width="100" Grid.Column="1" Source="images/011.png" />
        <Image VerticalAlignment="Center" x:Name="img2" Height="100" Width="100" Grid.Column="2" Source="images/012.jpg" />
        <Image VerticalAlignment="Center" x:Name="img3" Height="100" Width="100" Grid.Column="3" Source="images/013.png" />
        <Image VerticalAlignment="Center" x:Name="img4" Height="100" Width="100" Grid.Column="4" Source="images/014.png" />
        <Image VerticalAlignment="Center" x:Name="img5" Height="100" Width="100" Grid.Column="5" Source="images/015.png" />
        <Image VerticalAlignment="Center" x:Name="img6" Height="100" Width="100" Grid.Column="6" Source="images/016.png" />

6. Во вторую строку помещаем Slider и делаем объеденение всех столбцов, задаем растягивание на полную. Орентацию горизантальную. Минимум ставим в 1, а максимум в 6. Не забываем обозвать элмент управления Slider к примеру «slider» =). А так же создаем обработчик изменения значения Value у слайдера

<Slider HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.IsSharedSizeScope="False" Orientation="Horizontal" Grid.Row="1" Grid.ColumnSpan="7" Maximum="6" Minimum="1" Value="1" x:Name="slider" ValueChanged="sliderChanged" />

Вот и все код XAML закончился.
Теперь приступим к написанию обработчика.

1. Создаем поле которое будет отвечать за текущую позицию ползунка

 double sliderValue = 1;

2. Создаем обработчик sliderChanged

private void sliderChanged(object sender, EventArgs e)

3. Теперь займемся телом обработчика

            // Записываем в переменую размер первой строки в Gride
            double d = grid2.RowDefinitions[0].Height.Value;

            Image f;

            // Делаем поиск в gride2 элемента img+текущая позиция ползунка
            f = (Image)grid2.FindName("img" + sliderValue);
            f.Height = 100;
            f.Width = 100;
            //Маска прозрачности, делаем елемент прозрачным
            f.OpacityMask = new SolidColorBrush(Color.FromArgb(50, 0, 0, 0));

            // ззаписывам текущую позицию ползунка
            sliderValue = Convert.ToInt32(slider.Value);
            f = (Image)grid2.FindName("img" + sliderValue);
            f.Height = d;
            f.Width = d;
            //Маска прозрачности, прозрачность отсутвует
            f.OpacityMask = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
            //Выводит в заголовок окна какой элемент сейчас выбран
            SlideImages.Title = f.Name.ToString();

            //Выводит в заголовок окна какой элемент сейчас выбран
            SlideImages.Title = f.Name.ToString();

Вот и все, данный пример можно будет модифицировать и использовать для создания галереи на WPF, что я вам и продемонстрирую в следущий раз.

Исходник : Скачать с Депозита

Hello world!

Вот я и решил создать свой блог.
Надеюсь хоть кому то он прейдется по душе =)